Як спроєктувати сайт із CSS Grid?

02.04.20. Час прочитання - 8 хв

У минулій статті Вчимо CSS Grid за 5 хв ми розглянули з Вами що таке модуль CSS Grid та як застосовувати його для розміщення елементів на сторінці. Він дозволяє експериментувати з макетами значно швидше, ніж будь-який інший інструмент. У цій публікації ми покроково покажемо Вам який HTML та CSS нам потрібні для цього завдання.

Почнемо з дуже простої сітки, яка імітує класичний веб-сайт.

Розмітка

Розмітку робимо у HTML. Створюємо контейнер (елемент який ми перетворимо в сітку) і елементи (хедер, меню, контент, футер).

Налаштування CSS

Далі потрібно налаштувати нашу сітку і вказати, скільки рядків та стовпців потрібно. Ось початковий CSS для цього👇

Ось що говорить цей код: Ви створили сітку з дванадцятьма стовпцями, кожен шириною частки одиниці (1/12 загальної ширини). Створили три рядки: перший 50px висотою, другий 350px і третій 50px. І додали проміжок між елементами в сітці.

Додаємо grid-template-areas

Функція, яка дозволить нам легко експериментувати з макетом, називається шаблоном. Щоб додати його в Grid, треба просто задати контейнеру властивість grid-template-areas. Синтаксис може бути трохи дивним, оскільки він відрізняється від будь-якого іншого у CSS. Ось він👇.

Логікою властивості grid-template-areas є те, що Ви створюєте візуальне уявлення Вашої сітки в коді. Як бачите, він має три рядки й дванадцять стовпців, точно так само, як ми визначили в grid-template-columns і grid-template-rows.

☝️Кожен рядок коду представляє рядок в макеті і кожен із символів (h, m, c, f) представляє елемент сітки.

Кожна з чотирьох букв тепер утворює прямокутний grid-area.
І як Ви могли здогадатися, ми вибрали символи h, m, c, f, тому що наш Grid складається з header, menu, content і footer. Зрозуміло, що ми могли б назвати їх так, як захочемо, але має сенс використовувати перший символ елементів, які вони описують.

Надання областей для елементів

Тепер нам потрібно зв'язати ці символи з нашими елементами в сітці. Для цього ми будемо використовувати властивість grid-area👇.

Ось що ми отримаємо 👇.

Експерименти з макетом

Тепер ми нарешті можемо досягти гарного вигляду цієї функції тому, що можемо легко експериментувати з макетом, змінюючи положення символів у властивості grid-template-areas. Давайте, наприклад, перемістимо меню в праву сторону👇.

На макеті це виглядатиме так👇.

Ми можемо використовувати точки для створення порожніх комірок сітки.

Виглядатиме наступним чином.

Додаємо адаптивність

Поєднання цієї функції з адаптивністю також "сильно", оскільки це просто не могло бути можливо тільки з HTML та CSS. Припустимо, Ви хочете, щоб меню підіймалося до хедера, коли сторінка переглядається на мобільному пристрої. В цьому випадку Ви можете просто зробити так👇.

Ось результат👇.

☝🏻Пам'ятайте, що всі ці зміни виконуються за допомогою чистого CSS, не торкаючись HTML. Ми можемо переміщати елементи так, як ми хочемо, незалежно від того, як теги div розташовані в розмітці. Це називається незалежністю від джерела, і це величезний крок вперед для CSS. Це дозволяє HTML бути тим, для чого він був призначений: розміткою для контенту. А стилізація — це вже робота CSS.