Як спроєктувати сайт із 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.