Доступно з Esl 1.6.1 CSS grid дозволяє створювати двомірні макети (стовпці та рядки). У той час як CSS flexbox, який Esl використовує як модель макета за замовчуванням, розроблений для одновимірних макетів (або стовпця, або рядка).
Створення макета сітки
Ви можете перетворити будь-який елемент макета (секція, контейнер, блок, div) на макет CSS grid, встановивши значення Display на grid. Цей елемент є вашим Grid Container.
Кожен безпосередньо дочірній елемент вашого контейнера сітки є Grid Item, з додатковими налаштуваннями для Grid column та Grid row для розміщення елемента в межах сітки.
Коли ви редагуєте контейнер сітки в системі, з’являється перекриття сітки, яке вказує на клітини сітки. Натискання на маленьку іконку дії з чотирма квадратами дозволяє відображати/сховувати це перекриття.
Як видно на скріншоті вище, елементи сітки за замовчуванням розташовані в рядках, покриваючи всю ширину контейнера сітки. Це саме по собі не виявляє справжню силу CSS grid, поки ви не почнете …
Налаштування стовпців та рядків (явна сітка)
Після створення нашого контейнера сітки настав час визначити ст tracks наших стовпців та рядків tracks.
Ми можемо зробити це явно через налаштування Grid template columns (grid-template-columns) та Grid template rows (grid-template-rows) нашого контейнера сітки.
Давайте розглянемо кілька прикладів разом …
grid-template-columns: 200px 1fr 2fr
Кожне значення властивості grid-template-columns створює доріжку стовпця.
Приклад вище створює макет сітки з трьох стовпців.
Стовпець 1 має фіксовану ширину 200px. Стовпець 2 – це 1fr, а стовпець 3 – це 2fr за шириною.
fr – це нова гнучка одиниця, званий дробовою одиницею, яка займає x частин доступного простору.
Як розраховується fr?
Скажімо, наш контейнер сітки має ширину 1100px (стандартна ширина контейнера).
Спочатку потрібно відняти всі ненормовані значення та прогалини: отже, від фіксованої ширини 200px для колонки 1 залишається доступна ширина 900px.
Ми маємо 3 дробові одиниці в загальному (1fr з колонки 2 плюс 2fr з колонки 3), щоб виділити залишковий простір.
Отже, 1fr дорівнює 300px (= 900px / 3). Таким чином, ширина колонки 2 становить 300px (= 1fr x 300px), а ширина колонки 3 становить 600px (= 2fr x 300px).
grid-template-rows: 100px 300px
Кожне значення властивості grid-template-rows створює доріжку ряду.
Приклад вище явно визначає перші два рядки. Ряд 1 має висоту 100px, а ряд 2 має висоту 300px.
Оскільки ми явно визначили висоту лише для перших двох рядків, висота будь-якого рядка після ряду 2 визначається за замовчуванням висотою його вмісту. Ми можемо змінити цю поведінку, створюючи неявну сітку …
Неявна сітка
Генератор контейнера сітки зазвичай створює додаткові (колонкові та рядкові) треки для елементів сітки, які виходять за межі вашої явно визначеної сітки. Це називається неявною сіткою.
Ви можете визначити розміри колонок і рядків цієї неявної сітки через налаштування Grid auto columns (grid-auto-columns) і Grid auto rows (grid-auto-rows) вашого контейнера сітки.
Мінімальні та максимальні розміри треків сітки
CSS-функція minmax дозволяє встановити мінімальний та максимальний розміри треків.
Вона приймає два аргументи. Перший – це мінімальне значення, а другий – максимальне значення вашого треку сітки.
grid-template-columns: repeat(3, minmax(200px, 1fr))
Створює явну 3-колонну сітку, де кожен елемент сітки має мінімальну ширину 200px і максимальну ширину 1fr.
Проблема цієї явної сітки в тому, що вона не є адаптивною. Вона перевищує, коли ширина вікна менше 600px (3 колонки з мінімум 200px), і кількість колонок не регулюється під різні точки зламів безпосередньо.
Ключові слова auto-fill та auto-fit
Ми можемо використовувати ключові слова auto-fill або auto-fit, щоб вирішити ці проблеми адаптивності. Це дозволяє створювати адаптивні макети сітки без медіа-запитів.
Отже, замість встановлення явної 3-колонної сітки, ми використовуємо ключове слово auto-fill або auto-fit ось так:
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
Яке ключове слово використовувати, залежить від бажаної поведінки. auto-fit розширює елементи сітки, щоб зайняти доступний простір. В той час як auto-fill цього не робить (воно зберігає доступний простір).
Розміри повторних треків
CSS-функція repeat дозволяє визначити патерн повторюваного розміру треку в компактному форматі.
Вона приймає два аргументи. Перший — це кількість разів, коли трек повинен повторюватися, а другий — це визначення треків.
grid-template-columns: repeat(3, 1fr)
Створює явну сітку з 3 колонок.
grid-template-rows: 100px repeat(2, 1fr) 200px
Створює явну сітку з 4 рядків. Де рядок 1 має висоту 100px, рядки 2 і 3 — по 1fr, а рядок 4 — 200px.
Розміщення елементів сітки (за номером лінії)
Лінії сітки позначають початок або кінець колонки або рядкової траси. Нумерація починається з 1.
Ми можемо використовувати ці номери ліній, щоб розмістити елемент сітки на сітці.
Приклад нижче показує явну сітку з трьох колонок, елементи якої займають три рядки.
Це означає, що ця сітка має 4 лінії колонок і 4 лінії рядків.
При перевірці макету сітки будь-якого веб-сайту, натискаючи на маленьку синю кнопку grid біля вузла елемента в браузері, в даному випадку Chrome, ви також побачите лінії сітки:
У нашому прикладі вище ми розмістили Елемент сітки 2 через налаштування колонки сітки (grid-column) та рядка сітки (grid-row) ось так, тому він займає дві колонки і два рядки:
Налаштування Колонки сітки & Рядка сітки доступні для всіх елементів сітки (прямих нащадків контейнера сітки).
Синтаксис: перше значення вказує на номер початкової лінії. За ним слідує коса риска (/). За нею йде друге значення, яке вказує на номер кінцевої лінії.
У нашому прикладі вище ми встановили Колонку сітки на “2 / 4”. Це говорить сітці, що ми хочемо, щоб Елемент сітки 2 починався з лінії колони 2 і закінчувався на лінії колони 4. Рядок сітки встановлено на “1 / 3”, що означає, що Елемент сітки 2 починається з лінії рядка 1 і закінчується на лінії рядка 3.
Ми могли б досягти того ж макету, встановивши налаштування колонки сітки & Рядка сітки на “span 2“. span — це ключове слово, яке говорить макету сітки, скільки колонок або рядків елемент повинен охоплювати.
Примітки
Іменовані області сітки (grid-template-areas) мають бути визначені через власний CSS.
Розміщення елементів сітки всередині циклу запиту найкраще робити через nth-child у власному CSS.
Ця стаття призначена для надання огляду CSS сітки, а не повного довідника. Ми рекомендуємо скористатися посиланнями, наведеними нижче, щоб дізнатися більше про CSS сітку.
Додаткові ресурси
- Повний посібник з CSS Grid (від CSS tricks)
- learncssgrid.com (всеосяжний огляд CSS сітки)
- cssgrid.io (безкоштовний курс CSS сітки від Веса Боса)