Переміщення елементів у макеті сітки CSS [Керівництво]
Використання CSS Grid Layout Module в веб-дизайні стає все більш і більш можливою, оскільки більше браузерів починають підтримати його. Створюючи макети, що заповнюють клітинки сітки, може виникнути момент, коли ви хочете досягти більш складних речей.
Наприклад, ви можете це зробити злегка переміщатися деякі елементи сітки застрягли у своїх областях сітки. Ви також можете захотіти висунути їх з контейнера сітки (переповнення), або один над одним (перекриваються), або просто… до деякого порожнього простору навколо.
Отже, на цій посаді я покажу вам, як ви можете елементи переміщення, порядку, переповнення, перекриття та розміру при використанні модуля компонування сітки CSS.
Створення сітки CSS
Спочатку створімо просту сітку CSS з один рядок і три стовпці.
У HTML ми створюємо купу divs, де контейнер сітки містить три елементи сітки.
У CSS, контейнер сітки має дисплей: сітка; власності та елементи сітки є площа сітки що ідентифікує назви областей елементів сітки.
Ми також додайте сітки-шаблонні області власності до контейнера сітки, до якого використовуються імена областей сітки призначити області сітки клітинам сітки, які вони представляють.
Усі стовпці прийняти розмір однієї дробу (fr) ширини контейнера, що забезпечує утримання елементів сітки.
.сітка-контейнер дисплей: сітка; grid-template-areas: 'лівий центр праворуч'; grid-template-колонки: повтори (3, 1fr); grid-template-рядки: 80px; розрив сітки: 5px; ширина: 360px; фоновий колір: пурпуровий; .grid-left grid-area: left; .grid-центр сітка-область: центр; .grid-right grid-area: right; .grid-контейнер div колір тла: світло-зелений;
Переповнення елементів сітки
Ви можете зробити елемент сітки перетікає його контейнер сітки якщо це необхідно для компонування. Щоб досягти ефекту переповнення, потрібно просто використовувати інший розмір стовпця:
.сітка-контейнер дисплей: сітка; grid-template-areas: 'лівий центр праворуч'; grid-шаблон-колонки: повтори (3, 150px); розрив сітки: 5px;
The Сума розміру стовпця та щілини більше, ніж ширина контейнера, що призводить до переповнення елементів сітки контейнером.
Перекриття елементів сітки
A елемент сітки може перекриватися (повністю або частково покрити) іншого елемента сітки у наступних випадках:
- Вона налаштована на охоплення (і над) клітин (ів) іншого елемента сітки.
- Її розмір був збільшений, змушуючи його перекриватися з елементом сусідньої сітки.
- Він переміщується поверх іншого елемента сітки.
Ми обговоримо другий і третій випадки пізніше, в “Розміри” і “Переміщення” розділів.
По-перше, побачимо перший випадок, коли елемент сітки охоплює інший.
Елемент сітки в центрі натягнута на ліву, так що на екрані відображаються лише два елементи.
.сітка-центр сітка-область: центр; сітка-колонка: 1/3;
The сітка-колонка і сітка-рядок властивості призначити лінії сітки між якими має відповідати стовпець або рядок.
На діаграмі нижче ви можете побачити, як сітка-колонка: 1/3 Правило CSS працює: центральна колонка проходить між лініями 1 і 3 сітки. У результаті центральна колонка перекриває ліву.
Перемістити елементи сітки
Під рухом я маю на увазі переміщення елементів трохи навколо. Якщо ви повністю хочете перемістити елемент в іншу клітинку / область сітки, я рекомендую вам оновити код створення сітки.
Переміщення навколо елементів сітки просте. Просто використовувати маржа, перетворення, або позиція: відносна; властивості. Див. Нижче, як елементи переміщуються за допомогою цих властивостей.
Центральні та праві елементи сітки можна переміщати (як показано вище) такими способами:
1. Використання маржа
Негативні поля збільшують розміри елементів сітки, а позитивні поля обробляють їх. Використовуючи комбінацію обох, ви можете переміщати елементи сітки навколо.
.сітка-центр сітка-область: центр; margin-left: -10px; margin-right: 10px; margin-top: -10px; margin-bottom: 10px; .grid-right grid-area: right; margin-left: 10px; margin-right: -10px; margin-top: -10px; margin-bottom: 10px;
2. Використання перетворення
The перекласти () Функція CSS переміщує елемент по осях x і y. Використовуючи його разом з перетворення властивість дозволяє змінити позицію елемента сітки.
.сітка-центр сітка-область: центр; transform: translate (-10px, -10px); .grid-right grid-area: right; transform: translate (10px, -10px);
3. Використання позиції
Використання позиція: відносна; правило з вказаним зверху, знизу, зліва, і право властивості можна також використовувати для переміщення навколо елементів сітки.
.сітка-центр сітка-область: центр; позиція: відносна; знизу: 10px; праворуч: 10px; .grid-right grid-area: right; позиція: відносна; знизу: 10px; ліворуч: 10px;
Замовлення елементів сітки
На екрані відображаються елементи сітки у порядку, у якому вони відображаються у вихідному коді HTML.
У попередньому розділі, коли елемент центру було переміщено вліво, його було розміщено у верхній частині лівого елемента за допомогою веб-переглядача. Це відбулося тому, що в HTML, Однак ми можемо зміна елементів сітки замовлення за допомогою Використання Як і в модулі CSS Grid Layout, змінюється порядок елементів в HTML не впливає на макет сітки, Ви також можете поставити Якщо ви використовуєте рядки або стовпці з автоматичним розміром для елемента сітки (за допомогою Пам'ятайте, що в нашій зразковій сітці всі три стовпці беруть одну фракцію ( Тут ми змінюємо розмір лівого елемента за допомогою Тут ми змінюємо розмір лівого елемента за допомогою z-індекс або замовлення Властивості CSS.
z-індекс: 1; правило, лівий елемент сітки отримав більш високий контекст укладання.. сітка-ліва сітка-область: ліва; z-індекс: 1;
Розмір сітки елементів
авто, fr, гр одиниць), вона буде скорочуватися, щоб створити простір для свого сусіднього пункту, який збільшився в розмірах лише якщо згаданий пункт розміром не було перетворення або від'ємна маржа.fr) контейнера сітки. Подивіться, як виглядають всі три пункти після того, як лівий розмір змінюється двома різними способами.1. Розмір з
ширина і висоташирина і висота властивості. В результаті, він залишається всередині контейнера сітки.
.сітка-ліва сітка-область: ліва; ширина: 200px; висота: 90px;
2. Розмір з
перетворенняперетворення власності. Внаслідок цього він переливає контейнер і розрив сітки також зникає.
.сітка-ліва сітка-область: ліва; transform: scalex (1.8);
