Вчимо CSS Grid за 5 хв

28.03.20. Час прочитання - 5 хв

Grid макети відіграють важливу роль в дизайні веб-сайтів, а модуль CSS Grid — це найпотужніший і водночас найпростіший інструмент для його створення. Модуль отримав нативну підтримку основних браузерів (Safari, Chrome, Firefox), тому всім Front-end розробникам рекомендуємо вивчати цю технологію. У цій статті розповідаємо Вам основи CSS Grid.

Робимо Ваш перший CSS Grid макет

Двома основними компонентами CSS Grid є обгортка (батько) і елементи (діти). Обгортка — це фактично сітка, а елементи — вміст всередині сітки.
Ось розмітка для обгортки з шістьма елементами в ній:

Щоб перетворити обгортку div у сітку, ми просто дамо їй відображення grid:

Але поки що нічого не відбувається, оскільки ми не визначили, як хочемо, щоб наша сітка виглядала. Зараз наші 6 div просто поскладані в стовпчик.

Про стовпці та рядки

Щоб зробити його двовимірним, нам потрібно визначити стовпці та рядки. Наприклад, створимо три стовпці та два рядки. Будемо використовувати для цього властивості grid-template-row і grid-template-column.

Оскільки ми написали три значення для grid-template-columns, ми отримаємо три стовпці. А також отримаємо два рядки, оскільки ми вказали два значення для grid-template-rows.
Значення визначають ширину наших стовпців (100px) і висоту рядків (50px).
Ось результат:

Щоб переконатися, що Ви правильно розумієте взаємозв'язок між значеннями і як виглядає сітка, гляньте на цей приклад.

Спробуйте зрозуміти зв'язок між кодом і макетом.
На макеті дані розміри будуть виглядати ось як:

Розміщення елементів

Наступне, що Вам буде потрібно дізнатися, це як розміщувати елементи на сітці. Це дуже просто. Наприклад, створимо сітку 3x3, використовуючи ту ж розмітку, що і раніше.

Макет буде таким 👇🏻

❗️Зверніть увагу, що ми бачимо сітку 3х2 на сторінці, в той час, коли ми задали її як сітку 3х3. Це через те, що у нас лише 6 елементів, а щоб заповнити сітку по наших параметрах, потрібно ще три для нижнього рядка (ну і в сумі має бути 9 елементів).

Для позиціювання і зміни розміру елементів ми будемо використовувати властивості grid-column і grid-row:

Тут ми говоримо про те, що ми хочемо, щоб item1 починався з першої лінії сітки та закінчувався на четвертому стовпці. Іншими словами, він займе весь рядок.

Ось як це буде виглядати на екрані:

Ви, мабуть, збентежені, чому у нас 4 стовпці, коли ми задали тільки 3. Погляньте на це зображення, де виділені лінії стовпців чорним кольором:

Зверніть увагу, що тепер ми використовуємо всі рядки в сітці. Коли ми зробили так, щоб перший елемент займав весь перший ряд, він зрушив інші елементи вниз.

А тепер ловіть простіший синтаксис для прикладу вище 👇🏻

Переконайтеся, що Ви правильно зрозуміли цю концепцію, і тепер трохи перебудуємо елементи.

Спробуйте зрозуміти чому це виглядає саме так. Не повинно бути надто складно.

От і все. Продовження у наступній статті. Ставте плюсик в коментарях, якщо цікаво та все зрозуміло 😊.