Front-end 15/03/2023

Grid в CSS: повний посібник та довідник з верстки

Журналіст

Зміст

Що таке Grid в CSS
Принцип роботи Grid у CSS
Створюємо шаблон сайта з CSS Grid
CSS Grid вирівнювання
Робота з рядками у Grid
Gap у Grid CSS
Завдання власних властивостей для grid-елементів
Розташування grid-элементів за координатами
Зворотній відлік у Grid CSS
Явні та неявні гріди
Використання властивостей під час роботи з неявними грідами
Shortcuts — спрощене написання властивостей
Що краще: Flexbox чи Grid?
Переваги технології Grid в CSS
Адаптивна верстка Grid на прикладі
Анімація з Grid
Висновок

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

Цікаво? Тоді почнемо.

Що таке Grid в CSS

Якщо ви придивитеся до дизайну більшості вебсторінок, ви побачите, що контент на них впорядкований, а всі елементи розташовані рівно.

Наприклад, сайт може складатися з бокового блоку, футера, контентної частині та мати шапку (header):

grid

Щоб дизайн сайту не виглядав абияк, ці блоки акуратно вирівнюють відносно один одного. При цьому враховують адаптивність сайту: при масштабуванні елементи не повинні зрушуватись та ускладнювати сприйняття контенту.

Це досить складне завдання, якщо контенту на сайті багато, а інтерфейс нестандартний.

Для налаштування розташування елементів сайту використовується умовна решітка (сітка), яка називається grid. Блоки сайту вибудовують із прив’язкою до grid-макету, який виглядає як масив комірок усередині сітки.

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

Використовуючи верстку по сітці (grid), розробники можуть легко керувати розміром, позиціонуванням та порядком шарів сторінки.

Також верстка за грідами (або на основі grid-макету) допомагає керувати видимістю блоків, переходами, відступами та іншими розмічальними засобами CSS для створення реактивних та адаптивних інтерфейсів.

Онлайн-курс "Бренд-менеджмент" від Laba.

Розберіться в комплексному управлінні брендом: від його структури до комунікації з аудиторією.Дізнайтесь принципи побудови бренд-стратегії, проведення досліджень і пошуку свого споживача.

Детальніше про курс

Принцип роботи Grid у CSS

Одне з фундаментальних понять у верстці — це Grid Layout або макет сітки. На сленгу верстальники часто називають їх просто грідами.

Такий макет виглядає як розкладка з вертикальних та горизонтальних ліній, які утворюють стовпці та рядки. Його головне призначення — поділ площі вебсторінки для впорядкованого розміщення елементів на ній, а також проєктування вебсайту з адаптивним дизайном.

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

Grid Layouts нагадують таблиці, але з їх допомогою них простіше працювати з вебпримітивами.

Наприклад, завдяки ним, дочірні елементи grid-контейнеру можуть нашаруватися один на інший.

grid

Створимо макет вебсторінки з базовою розміткою та на прикладі розглянемо властивості Grid Layout.

Створюємо шаблон сайта з CSS Grid

У файлі з html-розміткою додамо блок <div> із класом box і помістимо до нього 16 елементів <div> із класом item. Всередині кожного елемента помістимо різну кількість тексту — від одного слова до п’яти — це необхідно для наочності прикладу.

<!DOCTYPE html>
<html lang="en">
<head>
        <title>Document</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/style.css" >
</head>
<body>
    <div class="box">
        <div class="item">Highload</div>
        <div class="item">Highload, today</div>
        <div class="item">Highload, today dolor</div>
        <div class="item">Highload today dolor sit omet</div>
        <div class="item">Highload</div>
        <div class="item">Highload, today</div>
        <div class="item">Highload, today dolor</div>
        <div class="item">Highload today dolor sit omet</div>
        <div class="item">Highload</div>
        <div class="item">Highload, today</div>
        <div class="item">Highload, today dolor</div>
        <div class="item">Highload today dolor sit omet</div>
        <div class="item">Highload</div>
        <div class="item">Highload, today</div>
        <div class="item">Highload, today dolor</div>
        <div class="item">Highload today dolor sit omet</div>
    </div>
</body>
</html>

Далі переходимо у CSS-файл і задамо деякі параметри наших елементів:

body{
    padding: 50px 100px;
    font-family: sans-serif;
    font-size: 22px;
    font-weight: bold;
}
.item{
    border: 2px solid rgb(77, 77, 77);
    background-color: rgb(9, 188, 131);
    color: rgb(255, 255, 255);
}

Ось що виведе такий код:

grid2

Для того, щоб позначити батьківський елемент box як частину grid-макету, ми повинні встановити властивості CSS display: grid;. Після того, як ми це зробимо, візуально нічого не зміниться, але властивості елементів будуть іншими, тому що тепер ми працюємо з грід-розміткою.

Щоб керувати розміткою, потрібно встановити її параметри:

число стовпців та рядків;
їхні розміри.

Для опису стовпців Grid Layout використовується команда grid-template-columns:.

Припустимо, нам необхідно встановити два стовпці, шириною 200 та 300 пікселів відповідно. Для цього пишемо такий CSS-код:

.box{
    display: grid;
    grid-template-columns: 200px 300px ;
}

Оскільки ми вказали два значення (200px та 300px), ми отримали два стовпці:
grid3

Вкажи ми три значення, ми отримали б три стовпці, чотири значення — чотири, тощо.

Онлайн-курс "Арт Менеджер" від Skvot.

Навчіться шукати фінансування та планувати бюджет, керувати командою, запускати артпроєкти та пітчити їх так, щоб великі компанії захотіли колабитися.

Детальніше про курс

Значення, які описують розміри, можуть бути вказані в будь-яких одиницях розмірності, що використовуються в CSS:

px;
vh;
rem;
%.

Наприклад, якщо додатково вказати 15%, ми отримаємо третій стовпець, ширина якого буде автоматично визначена як 15% від ширини елемента box:

.box{
    display: grid;
    grid-template-columns: 200px 300px 15% ;
}

grid4

Бачимо, що під час виконання цього коду з’явилася проблема: остання комірка змістилась на новий рядок. Щоб це виправити, створимо четвертий стовпець та вкажемо для нього ширину auto:

.box{
    display: grid;
    grid-template-columns: 200px 300px 15% auto ;
}

Тепер на макеті у нас є чотири стовпці:

перша шириною 200 пікселів;
друга — 300 пікселів;
третя займе 15% від ширини box;
а четверта — заповнить місце, яке залишилося:

Зауважте, що параметр auto (всупереч логіці) не означає «рівномірне» заповнення. Якщо вказати ширину останніх двох стовпців auto, ми отримаємо різну ширину для третього і четвертого стовпця. У цьому легко переконатись за допомогою інструментів для розробника.

Але чому так?

Справа в тому, що ширина стовпця з параметром auto розраховується залежно від кількості контенту, що його заповнює. Тому, якщо вказати цей параметр для нашого випадку, всі стовпці вийдуть різного розміру.

CSS Grid вирівнювання

Щоб вказати рівні розміри елементів сітки, використовуйте спеціальну одиницю виміру — фракцію (fr).

Наприклад, якщо потрібно вказати співвідношення ширин стовпців як одна частина, одна частина, одна частина та одна частина, ми вказуємо:

.box{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

Результат виконання цього коду:

Коли потрібно зробити багато стовпчиків, використовувати фракції незручно. У такій ситуації застосовують функцію repeat. Її аргументи показують, скільки разів потрібно повторити стовпець і в якій пропорції:

//наприклад, замість того, щоб писати у властивостях
    grid-template-columns: 1fr 1fr 1fr 1fr;
//можно вказати
    grid-template-columns: repeat( 6, 1fr );

Результат буде той самий:

Розмірності для repeat можна використовувати будь-які. Наприклад, вказати їх у пікселях:

.box{
    display: grid;
    grid-template-columns: repeat( 3, 400px );
}

Результат:

Робота з рядками у Grid

Схожа за змістом властивість є і у рядків. Вона називається grid-template-rows. Налаштування цієї властивості ідентичні параметрам grid-template-columns. Тут також можна використовувати будь-які розмірності для вказівки висоти рядків (відсотки, пікселі, фракції тощо), а також застосовувати repeat для швидкого опису властивостей груп рядків.

Вкажемо у стилях такі параметри:

.box{
    display: grid;
    grid-template-columns: repeat( 3, 400px );
    grid-template-rows: 100px 300px 150px;
}

І отримаємо такий макет для верстки:

Оскільки ми не задали явно розміри четвертого, п’ятого і шостого рядків, наш макет сам надав значення відсутнім параметрам.

У процесі верстки потрібно постійно пам’ятати і враховувати, що розмір контенту (особливо у динамічних сайтах) непостійний, його може бути як більше, так і менше. Тому якщо висота рядків не задана, макет підлаштовує висоту комірок під обсяг наявного контенту.

Gap у Grid CSS

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

.box{
    display: grid;
    grid-template-columns: repeat( 3, 400px );
    grid-template-rows: 100px 200px 150px;
    column-gap: 20px; // Для відступу між стовпцями
    row-gap: 40px; // Для відступу між рядами
}

Результат виконання кода:

grid12

Зверніть увагу, що праворуч і ліворуч ніяких полів відступу не додалося, а комірки виявилися притиснуті до свого батьківського контейнера. Щоб це виправити, замість column-gap і row-gap можна використовувати інший запис, що поєднує обидві властивості:

gap: 35px 15px; // Перший аргумент — відступ між рядками, другий — відстань між стовпцями.

Ось як тепер виглядатиме макет:

Онлайн-курс "Корпоративна культура" від Laba.

Як з нуля побудувати стабільну корпоративну культуру, систему внутрішньої комунікації та бренд роботодавця, з якими ви підвищите продуктивність команди, — пояснить HR-директор Work.ua.

Детальніше про курс

grid13

Якщо потрібно лише одне значення, навпроти непотрібного відступу можна просто поставити 0 (gap: 0 15px;):

grid15

Якщо вказати лише одне значення, наприклад, gap: 20px;, відступ буде автоматично призначений як для відстані між рядками, так і для відступу між стовпцями:

grid14

Завдання власних властивостей для grid-елементів

За замовчуванням прописані властивості застосовуються до Grid-контейнера, тобто батьківського контейнера box, усередині якого розміщені grid-елементи — items. Ці властивості автоматично розподіляються між елементами Grid-контейнера. Проте, для grid-елементів є можливість призначати свої власні властивості.

Припустимо, що нам потрібно, щоб перший елемент займав не одну комірку, а одразу дві. Задамо унікальний селектор для першого елемента у HTML-файлі :

<div class="box">
        <div class="item item-1">Highload</div>
        <div class="item">Highload, today</div>
        <div class="item">Highload, today dolor</div>
        <div class="item">Highload today dolor sit omet</div>
        <div class="item">Highload</div>
        <div class="item">Highload, today</div>
        <div class="item">Highload, today dolor</div>
        <div class="item">Highload today dolor sit omet</div>
        <div class="item">Highload</div>
        <div class="item">Highload, today</div>
        <div class="item">Highload, today dolor</div>
        <div class="item">Highload today dolor sit omet</div>
        <div class="item">Highload</div>
        <div class="item">Highload, today</div>
        <div class="item">Highload, today dolor</div>
        <div class="item">Highload today dolor sit omet</div>
    </div>

Тепер у CSS-файлі у відповідному розділі вкажемо його нові властивості:

.item-1{
    grid-column-start: span 2; //число вказує на кількість займаємих комірок}

Елемент займатиме перші дві комірки в ряді:

grid16

Якщо потрібно, щоб елемент зайняв також дві комірки в стовпцях, використовуємо властивість grid-row-start: span 2;.

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

Розташування grid-элементів за координатами

При роботі з CSS-модулем розкладки Flexible Box (або просто флексбокс) побудова елементів відбувається щодо головної та поперечної осей. У цьому випадку також задіюється технологія верстки Grid Layouts, тому побудова виконується щодо grid-ліній.

Хоча ці лінії ми не бачимо, ми можемо їх відобразити в інструментах для розробника. Для цього перейдіть у перегляд структури HTML-коду, знайдіть кнопку grid у батьківському елементі div класу box, а потім натисніть на неї:

Напрямні верстки (гріди) стануть помітні:

Номери grid-ліній можна сприймати як координати комірок елементів. Завдяки цьому можна позиціонувати кожну комірку по всій grid-розкладці.

Бізнес англійська від Englishdom.

Тут навчають за методикою Кембриджу, завдяки якій англійську вивчили понад 1 мільярд людей. Саме вона використовується в найкращих навчальних закладах світу, і саме за нею створені курси.

Інформація про курс

Наприклад, якщо вказати для елемента item-1 такі властивості, наша комірка також займе місце від першої grid-лінії до третьої:

.item-1{
    grid-column-start: 1;
    grid-column-end: 3;
}

Такий самий результат ми отримали б, якби вказали такі властивості:

.item-1{
    grid-column-start: span 2;
}

Але вказувати «координати» комірки не рекомендується, тому що так ми можемо її змістити. Краще визначити її положення з другої лінії по четверту:

.item-1{
    grid-column-start: 2;
    grid-column-end: 4;
}

grid21

Таким самим способом можна керувати і числом комірок, які зайняті по вертикалі, використовуючи властивості grid-row-start і grid-row-end:

grid22

Зверніть увагу: незважаючи на те, що комірка зрушила праворуч, у розмітці вона, як і раніше, стоїть першою.

Якщо вам необхідно уточнити положення комірки за координатами, використовуйте grid-row-start та grid-row-end. Якщо потрібно вказати положення без прив’язки до координат, використовуйте span.

Перелічувати значення цих властивостей найзручніше через слеш:

.item-1{
    grid-column: 2/4;  
    grid-row: 1/3;
}

В обох випадках перша цифра відповідає параметру start, а друга — end.

Результат буде той самий:

grid23

Також можна комбінувати аргументи властивостей, поєднуючи їх зі span:

.item-1{
    grid-column: 2/4;  
    grid-row: 2/ span 2;
}

Зворотній відлік у Grid CSS

Якщо звернете увагу на нумерацію grid-ліній, ви побачите, що крім «зрозумілих» номерів (1, 2, 3…), в Grid Layouts використовується також зворотній відлік. У цій системі остання вертикальна лінія — це−1, передостання — −2 и т.д. Аналогічний зворотний відлік існує і для горизонтальних рядів.

Виходить «перевернута» система координат, яка визначає в макеті лінії від останніх до перших. Це потрібно для того, щоб легко позиціонувати елементи, навіть якщо ліній у макеті дуже багато.

Бувають випадки, коли необхідно розтягнути комірку з першої grid-лінії до останньої, але кількість стовпців дуже велика. Якщо вам ліньки рахувати кількість стовпців, можна просто вказати в параметрах властивостей межі цієї комірки від першої grid-лінії до мінус першої, що буде означатиме всю ширину макета.

Ось як це виглядатиме в коді:

.item-1{
    grid-column: 1/-1;  
    grid-row: 2/span 2;
}

Результат виконання кода:

Явні та неявні гріди

Число ліній може збігатися з реальним числом проміжків між комірками. Це пояснюється тим, що grid-лінії бувають двох типів: явні і неявні.

Наприклад, якщо ми вказали в CSS-коді grid-template-rows: 100px 200px 150px;, то для зазначених рядків буде побудовано явні гріди. Навколо інших елементів гріди будуть відображатися як неявні — їх не буде видно.

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

Неймінг можна використовувати як для вертикальних, так і для горизонтальних ліній. Він може знадобитись, коли йде робота над великим проєктом і потрібно, щоб частини макета якось асоціювалися із загальним завданням. Іншими словами — для зручності.

Наприклад, якщо ми використовуємо для назви ліній імена [one], [two], [griditem3] та [item4], то при виконанні такого коду комірка займе місце між першою та третьою вертикальною лінією:

.box{
    display: grid;
    grid-template-columns: [one] 400px [two] 400px [griditem3] 400px [item4];
    grid-template-rows: 100px 200px 150px;
    gap: 20px;
}
.item-1{
    grid-column: one/griditem3;  
    grid-row: 2/span 2;
}

Використання властивостей під час роботи з неявними грідами

Створимо новий блок div із класом wrapper, а також чотири елементи:

клас header;
клас main;
клас aside;
і клас footer.

<div class="wrapper">
    <header class="header element">header</header>
    <main class="main element">main</main>
    <aside class="aside element">aside</aside>
    <footer class="footer element">footer</footer>
</div>

Властивість grid-template-areas

У файлі з CSS-стилями вкажемо нову властивість grid-template-areas. Ця властивість визначає структуру сітки з допомогою іменованих областей. Вона дозволяє задавати імена для областей, які займатимуть елементи на сітці, а потім розташовувати елементи відповідно до цих імен:

.wrapper{
    display: grid;
    grid-template-areas:
    "header header header"
    "main main aside"
    "footer footer footer" ;
}
.element{
    border: 1px solid#000;
    height: 200px;
}
.header{
    grid-area: header;
}
.main{
    grid-area: main;
}
.aside{
    grid-area: aside;
}
.footer{
    grid-area: footer;
}

В цьому прикладі ми вкажемо, що:

header займає три частини;
main — дві частини;
одну частину займає aside;
а три частини занимає footer.

Вийшов такий прямокутник:

Назви в grid-template-areas ніяк не пов’язані з назвами класів. Там можна записати будь-яке слово, наприклад:

.wrapper{
    display: grid;
    grid-template-areas:
    "text text text"
    "main main aside"
    "footer footer footer" ;
}
.header{
    grid-area: text;
}

Результат буде тим самим.

Цей метод наочний і зрозумілий, його зручно застосовувати, скажімо, коли над проєктом згодом працюватиме інша людина, яка має швидко розібратися у розмітці макета.

.wrapper{
    display: grid;
    grid-template-rows: repeat(3, 200px);
    grid-template-areas:
    "text text text"
    "main main aside"
    "footer footer aside" ;
}
.element{
    border: 1px solid#000;
}
.header{
    grid-area: text;
}
.main{
    grid-area: main;
}
.aside{
    grid-area: aside;
}
.footer{
    grid-area: footer;
}

grid28

Властивості grid-auto-rows та grid-auto-column

Припустимо, що у шаблон потрібно вставити порожню комірку. Наприклад, щоб блок main займав одну частину, а не дві, одна частина була під порожньою коміркою і одна частина була відведена під блок aside.

Ми не можемо просто видалити в grid-template-areas одне main, тому що тоді шаблон зламається і область main розділить доступний простір з областю aside. Натомість, щоб позначити порожню комірку, у властивостях шаблону потрібно вказати просто точку:

.wrapper{
    display: grid;
    grid-template-rows: repeat(3, 200px);
    grid-template-areas:
    "text text text"
    "main . aside"
    "footer footer aside" ;
}

Замість другого блоку main утворилася порожнеча, позначена в коді точкою:

Як уже йшлося вище, в grid-макеті можуть бути явні стовпці та ряди, а також неявні стовпці та ряди. У поточному проєкті явні ряди задані з висотами 100px, 200px та 150px:

.box{
    display: grid;
    grid-template-columns: [one] 400px [two] 400px [griditem3] 400px [item4];
    grid-template-rows: 100px 200px 150px;
    gap: 20px;
}

Решта рядків — неявна, і в них відсутня висота. Як її вказати?

Можна прописати в grid-template-rows всі висоти, які залишилися, але це не вирішить проблеми. У шаблоні можуть вноситися зміни (вручну або при додаванні контенту), тому невідомо, скільки комірок існуватиме в кінцевому варіанті і відразу прописати висоти всіх комірок неможливо.

Тому для вирішення проблеми використовують властивість grid-auto-rows, яка призначає висоти всім неявним рядам. Вкажемо таким коміркам висоту у 125px:

.box{
    display: grid;
    grid-template-columns: [one] 400px [two] 400px [griditem3] 400px [item4];
    grid-template-rows: 100px 200px 150px;
    grid-auto-rows: 125px;
    gap: 20px;
}

Тепер всі неявні ряди отримуватимуть висоту 125px:

grid30 В аргументах властивості grid-auto-rows можна задавати кілька значень, описуючи черговість висот комірок, що з’являтимуться. Наприклад, якщо вказати grid-auto-rows: 125px 225px;, то при таких параметрах ми отримаємо макет, де:

перший ряд займає 100px;
другий ряд — 200px;
третій ряд — 150px;
четвертий ряд — 125px;
п’ятий ряд — 225px;
шостий — 125px;
сьомий — 225px.

Восьмий знову набуде значення 125px, а далі цифри повторюватимуться відповідно до значень висот, зазначених у grid-auto-rows.

grid31

У міру додавання контенту на сторінку сайту кількість блоків може поступово зростати. Комірки, що додаються в розмітку, щоразу генерують нові рядки. Така поведінка пояснюється властивістю grid-auto-flow, яка за замовчуванням набуває значення row. Якщо значення змінити на column, то нові комірки генеруватимуться збоку від основної розмітки, створюючи нові стовпці:

Щоб керувати шириною таких комірок, використовуйте властивість grid-auto-column. Вказав grid-auto-columns: 300px;, ми отримаємо отримаємо ширину всіх комірок з неявними лініями рівну300px:

Аналогічно тому, як це було у випадку з параметрами grid-auto-rows, кілька записаних чисел позначають значення ширини комірок, що чергуються. Для grid-auto-columns: 300px 150px; маємо наступний вид розміщення комірок:

Властивість grid-auto-flow має ще одне значення — dense.

Припустимо, в макеті верстки комірки розміщуються таким чином:

для другого елемента вказано, що він повинен займати дві комірки;
а сьомий елемент повинен розташовуватися між другою та четвертою грід-лініями.

Оскільки місця для двох комірок другого елемента в першому ряду немає, він переноситься на наступний ряд, а на його місці утворюється порожнє місце. Те саме відбувається з сьомим елементом grid-контейнера — він повинен займати з другої по четверту комірку, утворюючи порожнє місце в розмітці:

<body>
    <div class="box">
        <div class="item item-1">Highload</div>
        <div class="item item-2">Highload, today</div>
        <div class="item">Highload, today dolor</div>
        <div class="item">Highload today dolor sit omet</div>
        <div class="item">Highload</div>
        <div class="item">Highload, today</div>
        <div class="item item-7">Highload, today dolor</div>
        <div class="item">Highload today dolor sit omet</div>
        <div class="item">Highload</div>
        <div class="item">Highload, today</div>
        <div class="item">Highload, today dolor</div>
        <div class="item">Highload today dolor sit omet</div>
        <div class="item">Highload</div>
        <div class="item">Highload, today</div>
        <div class="item">Highload, today dolor</div>
        <div class="item">Highload today dolor sit omet</div>
    </div>
</body>

body{
    padding: 50px 100px;
    font-family: sans-serif;
    font-size: 22px;
    font-weight: bold;
}
.item{
    border: 2px solid rgb(77, 77, 77);
    background-color: rgb(9, 188, 131);
    color: rgb(255, 255, 255);
    padding: 15px;
}
.box{
    display: grid;
    grid-template-columns: [one] 400px [two] 400px [griditem3] 400px [item4];
    grid-template-rows: 100px 200px 150px;
        /* grid-auto-flow: rows; */
    gap: 20px;
}
.item-1{
    grid-column: one/griditem3;  
    grid-row: 1/ span 2;
}
.item-2{
    grid-column: span 2;
}
.item-7{
    grid-column: 2/4;
}

grid35

Додавання нової властивості до грід-контейнера вирішує цю проблему:

.box{
    display: grid;
    grid-template-columns: [one] 400px [two] 400px [griditem3] 400px [item4];
    grid-template-rows: 100px 200px 150px;
    grid-auto-flow: dense;
    gap: 20px;
}

При використанні значення dense браузер буде намагатися розташувати всі елементи в сітці настільки компактно, наскільки це можливо. Це значення може бути особливо корисним при створенні дінамічних сіток із невідомою кількістю елементів, де необхідно максимізувати використання доступного простору.

Тим не менш, якщо необхідно зберегти «класичну» послідовність розміщення елементів, для властивості grid-auto-flow потрібно використовувати або значення row, або column.

За замовчуванням властивість працює з grid-auto-flow: rows. Якощо потрібно аби автоматичне розміщення комірок працювало для стовпців, вкажіть два значення: grid-auto-flow: column dense;:

grid36

grid37

У процесі верстки часто використовується значення minmax, яке застосовується для завдання розміру стовпчика в сітці (grid) в залежності від доступного простору на сторінці.

Це значення властивості grid-template-columns дає змогу вказати мінімальний та максимальний розміри стовпця. При його використанні браузер буде обирати розмір стовпця між цими значеннями в залежності від доступного простору:

.box{
    display: grid;
    grid-template-columns: 400px 400px 400px;
    grid-template-rows: 100px 200px 150px;
    grid-auto-columns: 300px;
    grid-auto-flow: dense ;
    gap: 20px;
}
.item-1{
    grid-column: 1 / 3;  
    grid-row: 1 / span 2;
}
.item-2{
    grid-column: span 2;
}
.item-7{
    grid-column: 2/4;
}

grid38

Додаємо у властивості контейнера grid-template-columns: 400px 400px 400px minmax(200px, 500px);. Цей запис означає, що четверта комірка повинна втискатися в 200px, якщо в грід-контейнері мало місця, або розтягуватися до 500px, якщо місця достатньо.

grid 39

Властивість justify-items

Наступна властивість, яка обов’язково стане в нагоді при роботі над макетом — justify-items. Вона застосовується до батьківського елемента, який є контейнером для дочірніх елементів, і може використовуватися спільно з іншими властивостями для керування розташуванням елементів усередині контейнера.

Незалежно від кількості контенту всередині комірки вона займає фіксований розмір, заповнюючи порожнє місце після тексту. Але при необхідності можна змусити комірку виділяти тільки контент і цей контент центрувати (як по вертикалі, так і по горизонталі):

.box{
    display: grid;
    grid-template-columns: 400px 400px 400px minmax(200px, 500px);
    grid-template-rows: 100px 200px 150px;
    grid-auto-columns: 300px;
    grid-auto-flow: dense ;
    justify-items: center;
    gap: 20px;
}

Наприклад, якщо вказати для цієї властивості значення center, комірки набудуть наступного вигляду:

Всього доступно п’ять варіантів значень властивостіjustify-items:

center. Вирівнює вміст елемента в центрі головної осі контейнера.
start. Вирівнює вміст елемента на початок головної осі контейнера.
end. Вирівнює вміст елемента до кінця головної осі контейнера.
stretch. Вміст елемента розтягується вздовж головної осі контейнера./
baseline. Вирівнює вміст елемента базової лінії головної осі контейнера.Аналогічно працює властивість align-items, яка також вирівнює елементи макета вертикальної осі всередині контейнера. Вказавши властивості align-items: center;, отримаємо наступну картину розміщення елементів:

.box{
    display: grid;
    grid-template-columns: 400px 400px 400px ;
    grid-template-rows: 100px 200px 150px;
    grid-auto-columns: 300px;
    grid-auto-flow: dense ;
    justify-items: start;
    align-items: center;
    gap: 20px;
}

grid45

Властивість justify-self

Нерідко потрібно звернутися до якоїсь конкретної комірки, наприклад, сьомої. У цьому випадку потрібно використовувати не justify-items, а justify-self.

Для нашого макету розміщення сьомої комірки зі значенням center буде виглядати так:

.box{
    display: grid;
    grid-template-columns: 400px 400px 400px ;
    grid-template-rows: 100px 200px 150px;
    grid-auto-columns: 300px;
    grid-auto-flow: dense ;
    gap: 20px;
}
.item-1{
    grid-column: 1 / 3;  
    grid-row: 1 / span 2;
}
.item-2{
    grid-column: span 2;

}
.item-7{
    grid-column: 2/4;
    justify-self: center;
}

grid 46

Властивість align-self

Властивість align-self дозволяє встановити вирівнювання для кожного окремого елемента сітки, а не для всієї сітки повністю. Так, якщо використовуючи селектор першої комірки, вказати значення end, перший елемент вирівнюється за нижнім краєм:

.item-1{
    grid-column: 1 / 3;  
    grid-row: 1 / span 2;
    align-self: end;
}

Змінивши значення на align-self: baseline;, ми побачимо, як вміст комірки «підстрибнув», тобто був вертикально вирівняний всередині комірки щодо базової лінії рядка:

Shortcuts — спрощене написання властивостей

Синтаксис властивостей, які використовуються при верстці за грідами має особливість — він може застосовуватися як у повному варіанті назви властивостей, так і зі скороченнями (shortcuts).

Замість стандартного опису властивостей:

.box{
    display: grid;
    grid-template-columns: 400px 400px 400px ;
    grid-template-rows: 100px 200px 150px;
    grid-auto-columns: 300px;
    grid-auto-flow: dense ;
    gap: 20px;
}

Можна вказати скорочену форму команд:

.box{
    display: grid;
    grid-template: 100px 200px 150px / 400px 400px 400px; 
    grid-auto-columns: 300px;
    grid-auto-flow: dense ;
    gap: 20px;
}

Причому до знака / у властивості grid-template вказуються значення для рядків (grid-template-rows), а після нього — значення для стовпців (grid-template-columns).

Аналогічним чином значення властивостей align-items: center і justify-items: center влможна замінити на більш лаконічний запис place-items: center. При цьому в інструментах розробника властивості align-items: centerта justify-items: centerбудуть відображатися для наочності:

grid49

Якщо потрібно розділити значення для align-items і justify-items, їх також потрібно записувати через пропуск. Наприклад, place-items: end start говорить про те, що малися на увазі значення властивостей align-items: end; і justify-items: start;.

Ще одне сильне скорочення задіяне за допомогою властивості grid. У значеннях цього шорткату можна вказати параметри:

grid-template-rows;
grid-template-columns;
grid-template-areas;
grid-auto-flow;
grid-auto-rows;
и grid-auto-columns.

Але застосовувати таке скорочення надмірно часто не раціонально, тому що воно візуально занадто довге і, якщо над проєктом працює кілька людей, є ризик, що не всі зрозуміють цей запис.

Що краще: Flexbox чи Grid?

Так як верстальники часто використовують також технологію Flexbox, у вебмастерів-початківців часто виникає питання: коли застосовувати Grid-верстку, а коли — Flexbox?

Універсальної відповіді на це питання немає — розуміння цих інструментів приходить із практикою. Тим не менш, ряд закономірностей все ж таки можна вивести. Віддаючи перевагу на користь однієї з технологій, ви повинні відповісти собі на два питання:

Як розташовуються елементи — по одній осі чи вздовж двох осей одночасно? Якщо в проєкті використовується одна вісь (X або Y), то з високою ймовірністю слід вибирати Flexbox. Якщо в макеті використовується сітка, де елементи повинні вишиковуватися по різних осях, то швидше за все варто використовувати Grid.
Чи ця стилізація має відношення до якоїсь структури? Якщо так, використовуйте Grid. Верстка по грідах застосовується для створення більш складних, двомірних макетів, з різними комірками, довільного розміру та форми.
За допомогою технології Grid, можна керувати розташуванням елементів в обох напрямках як по горизонталі, так і по вертикалі, а також контролювати відстані між елементами.

Також не забувайте, що технологію верстки по грідах можна легко поєднувати з Flexbox, тому робити однозначний вибір необов’язково.

Переваги технології Grid в CSS

Ми вже розглянули багато прикладів, тож можемо підбити проміжні підсумки.

Верстка з використанням грідів — це зручно, зрозуміло та швидко. Макети на грідах наочні, тому веброзробникам зручно доопрацьовувати такі проєкти, вносити до них зміни. Отже можна виділити п’ять основних переваг цієї технології:

Простота та зрозумілість розмітки. Grid розбиває контент на ряди та стовпці, що спрощує розмітку вебсторінок та дозволяє легко позиціонувати елементи на макеті.
Адаптивність. Grid допомагає створювати гнучкі макети, які можуть легко адаптуватися до різних екранів та пристроїв.
Гнучкість та контроль. Grid надає розробникам зручні інструменти, за допомогою яких можна контролювати розміщення елементів на сторінці. Він дозволяє створювати складні макети з різними зазорами, вирівнюванням та розташуванням елементів.
Менше коду. Grid дозволяє скоротити кількість CSS-коду, необхідного для створення складних макетів. Замість того, щоб задіювати велику кількість класів та стилів для розміщення елементів, можна використовувати лише кілька правил Grid.
Підтримка браузерів. Grid підтримується більшістю сучасних браузерів, включаючи Chrome, Firefox, Safari та Edge.

Адаптивна верстка Grid на прикладі

Розглянемо реальний проєкт — створимо адаптивну верстку головної сторінки для вебмагазину, де елементами макету є картки з товаром (Products) і банери (Sale).

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

Зробимо базову розмітку і додамо блоки div із класом cards — Grid буде обгорткою, що визначає основну сітку:

<div class="cards-grid">
    <div class="card-demo sale-1">Sale 1</div>
    <div class="card-demo sale-2">Sale 2</div>
    <div class="card-demo product-1">Product 1</div>
    <div class="card-demo product-2">Product 2</div>

    <div class="card-demo sale-3">Sale 3</div>
    <div class="card-demo sale-4">Sale 4</div>
    <div class="card-demo product-3">Product 3</div>
    <div class="card-demo product-4">Product 4</div>
</div>

Размітка містить:

два банери Sale 1 та Sale 2;
два продукти Product 1 та Product 2;
ще два банери Sale 3 та Sale 4;
і ще два продукти Product 3 та Product 4.

Створимо CSS-файл та почнемо роботу над розміткою.

Щоб все акуратно виглядало, вкажемо відступи між комірками в 20px і створимо чотири стовпця з шириною кожної по 260px. Поки ряди визначимо неявно — їхня кількість буде необмежена, але висота кожного ряду буде по 180px:

.cards-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4,260px);
    grid-template-rows: repeat(4,180px);
}

Ми створили базову сітку 4 х 4:

Використовуємо властивість grid-template-areas, щоб описати шаблон наших елементів та додамо для наочності тло до комірок:

.card-demo{
    background-color: rgb(154, 200, 251);
}
.cards-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4,260px);
    grid-template-rows: repeat(4,180px);
    grid-template-areas: 
    'wide1 wide1 product1 product2'
    'wide2 wide2 product1 product2'
    'product3 product4 wide3 wide3'
    'product3 product4 wide4 wide4';
}

Розтягнемо першу комірку на дві, додавши до CSS-файлу такий код:

.sale-1{
    grid-area: wide1;
}

Результат:

grid51

Після того, як ми вкажемо всі області, додаємо властивості:

.card-demo{
    background-color: rgb(154, 200, 251);
}
.cards-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4,260px);
    grid-template-rows: repeat(4,180px);
    grid-template-areas: 
    'wide1 wide1 product1 product2'
    'wide2 wide2 product1 product2'
    'product3 product4 wide3 wide3'
    'product3 product4 wide4 wide4';
}
.sale-1 { grid-area: wide1;}
.sale-2 { grid-area: wide2;}
.product-1 { grid-area: product1; }
.product-2 { grid-area: product2; }

.product-3{grid-area: product3;}
.product-4{grid-area: product4;}
.sale-3 {grid-area: wide3;}
.sale-4{grid-area: wide4;}

Такий Grid-макет міститиме елементи з комірками, розставленими у потрібному нам порядку та на бажаних областях:

grid52

Оскільки ми позиціонуємо елементи, звертаючись до класів, ми можемо в батьківському блоці поміняти черговість елементів — це не вплине на грід-макет:

<div class="cards-grid">
    <div class="card-demo sale-1">Sale 1</div>
    <div class="card-demo sale-2">Sale 2</div>
    <div class="card-demo sale-3">Sale 3</div>
    <div class="card-demo sale-4">Sale 4</div>

    <div class="card-demo product-1">Product 1</div>
    <div class="card-demo product-2">Product 2</div>
    <div class="card-demo product-3">Product 3</div>
    <div class="card-demo product-4">Product 4</div>
</div>

Але у нас залишилася проблема адаптивности верстки. Справа в тому, що у міру наповнення сайту товарами, кількість комірок зростатиме.

Щоб підготувати макет, вкажемо через властивість grid-auto-row неявні ряди. Коли в макеті сторінки додаватимуться нові ряди, вони будуть набувати висоту, яку ми вкажемо у значенні цієї властивості.

Додамо до розмітки нові товари:

<div class="cards-grid">
    <div class="card-demo sale-1">Sale 1</div>
    <div class="card-demo sale-2">Sale 2</div>
    <div class="card-demo sale-3">Sale 3</div>
    <div class="card-demo sale-4">Sale 4</div>

    <div class="card-demo product-1">Product 1</div>
    <div class="card-demo product-2">Product 2</div>
    <div class="card-demo product-3">Product 3</div>
    <div class="card-demo product-4">Product 4</div>
    <div class="card-demo ">Product 5</div>
    <div class="card-demo ">Product 6</div>
    <div class="card-demo ">Product 7</div>
    <div class="card-demo ">Product 8</div>
</div>

grid53

Встановимо властивість justify-content: center;. Висота картки з товаром у нас 380px, тому оберемо як значення висоти неявного ряду саме це число.

grid54

Тепер перейдемо до адаптивності.

Як тільки для виводу на екрані буде менше 1129 пікселів, перегляд контенту стане незручним — з’являтиметься прокручування, а контент вийде за межі видимої області. Щоб цього уникнути, підготуємо оптимізований макет верстки.

Перейдемо до налаштування адаптивної версії вебсторінки. Спочатку необхідно визначитися з точкою перелому, для якої нам буде потрібна адаптація макета.

Оберемо точку медіазапиту 1129px. Для версії екрану, скажімо, на планшеті, вихідний шаблон згодиться. В оригінальній верстці у нас чотири стовпця, але на планшеті ми будемо робити два стовпця шириною 260px.

Перевизначимо властивості grid-template-columns, а також властивості grid-template-rows. Також побудуємо новий шаблон розміщення елементів у комірках по областях. Ось як виглядатиме код:

.card-demo{
    background-color: rgb(154, 200, 251);
}
.cards-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, 260px);
    grid-template-rows: repeat(4,180px);
    grid-template-areas: 
    'wide1 wide1 product1 product2'
    'wide2 wide2 product1 product2'
    'product3 product4 wide3 wide3'
    'product3 product4 wide4 wide4';
    grid-auto-rows: 380px;
}
.sale-1 { grid-area: wide1;}
.sale-2 { grid-area: wide2;}
.product-1 { grid-area: product1; }
.product-2 { grid-area: product2; }

.product-3{grid-area: product3;}
.product-4{grid-area: product4;}
.sale-3 {grid-area: wide3;}
.sale-4 {grid-area: wide4;}
@media (max-width: 1129px) {
    .cards-grid {
        grid-template-columns: repeat(2, 260px);
        grid-template-rows: repeat(8,180px);
        grid-template-areas: 
        'wide1 wide1'
        'wide2 wide2'
        'product1 product2'
        'product1 product2'
        'wide3 wide3'
        'wide4 wide4'
        'product3 product4'
        'product3 product4'
        ;
    }
}

При використанні для перегляду сайту пристрою з роздільною здатністю екрана більше 1129 пікселів, вміст grid-макета буде відображатися у вигляді сітки з чотирма стовпцями.

Якщо ми перейдемо на екран меншого розширення, макет верстки буде показуватися вже інший, з комірками, розміщеними у два стовпця.

grid5

Аналогічний принцип використовується і для мобільної версії з точкою медіа-запиту на 409px. У цьому випадку треба підкоригувати грід-шаблон таким чином, щоб контент, що виводиться на екран, містився тільки в один стовпець:

grid56

Фінальный код виглядає так:

.card-demo{
    background-color: rgb(154, 200, 251);
}
.cards-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4,260px);
    grid-template-rows: repeat(4,180px);
    grid-template-areas: 
    'wide1 wide1 product1 product2'
    'wide2 wide2 product1 product2'
    'product3 product4 wide3 wide3'
    'product3 product4 wide4 wide4';
    grid-auto-rows: 380px;
}
.sale-1 { grid-area: wide1;}
.sale-2 { grid-area: wide2;}
.product-1 { grid-area: product1; }
.product-2 { grid-area: product2; }

.product-3{grid-area: product3;}
.product-4{grid-area: product4;}
.sale-3 {grid-area: wide3;}
.sale-4 {grid-area: wide4;}
@media (max-width: 1129px) {
    .cards-grid {
        grid-template-columns: repeat(2, 260px);
        grid-template-rows: repeat(8,180px);
        grid-template-areas: 
        'wide1 wide1'
        'wide2 wide2'
        'product1 product2'
        'product1 product2'
        'wide3 wide3'
        'wide4 wide4'
        'product3 product4'
        'product3 product4'
        ;
    }
}
@media (max-width: 409px){
    .cards-grid {
        grid-template-columns: 1fr;
        width:100%;
        grid-template-rows: repeat(12, 140px);
        grid-auto-rows: 300px;
        grid-template-areas: 
        'wide1'
        'wide2'
        'product1'
        'product1 '
        'product2'
        'product2'
        'wide3'
        'wide4'
        'product3 '
        'product3'
        'product4'
        'product4'
        ;
    }
}

Анімація з Grid

Одна з найцікавіших опцій CSS-верстки — анімація. Деякі властивості грідів також можна анімувати, створюючи цікаві дизайнерські ідеї.

Приклад №1

Створимо простий блок:

<div id="grid">
  <div id="leftedge"></div>
  <div id="rightedge"></div>
</div>

І анімуємо стилі:

body {
  margin: 0;
}

#grid {
  height: 100vh;
}

#leftedge {
  background: green;
}

#rightedge {
  background: navajowhite;
  border: 3rem solid rgb(0 0 0 / 10%);
}

#grid {
  transition: 300ms;
  display: grid;
  grid-template-columns: 48px auto;
}

#grid:has(#leftedge:hover) {
  grid-template-columns: 30% auto;
}

#grid {
  transition: 1000ms;
  display: grid;
  grid-template-columns: var(--left, 17px) auto;
}
#grid:has(#leftedge:hover) {
--left: 30%;

Такой код створюєанимований сайдбар, який «виїжджає» при наведенні курсору.

Анімація розміру стовпців виконується завдяки значенням grid-template-columns. Щоб вона була поступовою, використовуємо властивість transition. Псевдоклас :has() може бути використаний, щоб стилізувати grid-контейнер.

Приклад №2

Наступний приклад — анімація стовпців, що розсуваються.

Код HTML:

<div id="grid">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

Код CSS:

body {
  margin: 0;
}

#grid {
  height: 100vh;
  transition: 500ms;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3px;
  background: violet;
}

:where(.left, .center, .right) {
  background: navajowhite;
  transition: 300ms;
}

:where(.left, .center, .right):hover {
  background: violet;
}

#grid:has(.left:hover) {
  grid-template-columns: 2fr 0.3fr 0.3fr;
}

#grid:has(.center:hover) {
  grid-template-columns: 0.3fr 2fr 0.3fr;
}
#grid:has(.right:hover) {
  grid-template-columns: 0.3fr 0.3fr 2fr;
}

Результат:

У цьому прикладі анімується перехід для зміни ширини стовпців, а також змінюється заливка їхнього фону.

Важливо пам’ятати що grid, як і деякі інші CSS-властивості, при зміненні значень викликає перерахунок геометрії. Тому така анімація буде тормозити в порівненні із анімацією на transform. Використовуйте її лише тоді, коли немає інших варіантів.

Приклад №3

Третій варіант анімації із grid-версткою — збільшення комірок при наведенні курсора.

<div class="container">
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
    <div class="item item4"></div>
    <div class="item item5"></div>
    <div class="item item6"></div>
  </div>

Цей код створює контейнер із шістьма елементами, які розташовані у сітці з трьома стовпцями та двома рядками. Кожен елемент має фоновий колір сірого кольору, а при наведенні на елементи вони збільшуються на 20%. Елементи розташовані у певних позиціях у сітці за допомогою властивостей grid-column та grid-row.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 20px;
  height: 500px;

}

.item {  
  background-color: #ccc;
  transition: transform 0.3s ease;
  border: 17px solid #000;
  transition: transform 0.3s ease;
}

.item:hover {
  transform: scale(1.2);
}

.item1 {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

.item2 {
  grid-column: 3;
  grid-row: 1 / span 1;
}

.item3 {
  grid-column: 3;
  grid-row: 2 / span 1;
}

.item4 {
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
}

.item5 {
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
}

.item6 {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}

Результат:

Приклад №4

Приклад макету анімованого меню на грідах. Код HTML:

<div class="menu">
    <div class="menu-item">Головна</div>
    <div class="menu-item">О нас</div>
    <div class="menu-item">Контакти</div>
    <div class="menu-item">Блог</div>
    <div class="menu-item">Увійти</div>
  </div>

Код CSS:

.menu {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.menu-item {
  background-color: #eee;
  padding: 10px;
  text-align: center;
  transition: transform 0.2s ease-in-out;
}

.menu-item:hover {
  transform: translateY(-5px);
}

Цей приклад містить меню на основі грід-макета, пункти якого анімовані при наведенні на них курсором:

Приклад №5

У наступному прикладі створюється контейнер із класом .grid-container, який містить 9 елементів із класом .item. Властивостіgrid-template-rows та grid-template-columns вказуються для створення сітки три на три.

Потім додається клас .animate-grid до контейнера, щоб застосувати анімацію animate-grid. Вона змінює через деякий час значення grid-template-rows та grid-template-columns.

Анімація animate-grid використовує ключові кадриfrom и to (щоб задати початкове та кінцеве значення властивостей grid-template-rows та grid-template-columns). Потім застосовується властивість animation для анімації контейнера з класом .animate-grid.

Код:

<!DOCTYPE html>
<html>
  <head>
    <title>Animated Grid Layout</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        gap: 10px;
        width: 500px;
        height: 500px;
        margin: 0 auto;
      }

      .item {
        background-color: #eee;
        border: 1px solid #999;
        text-align: center;
        font-size: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.5s ease-in-out;
      }

      .item:hover {
        transform: scale(1.2);
        background-color: #ffcc00;
        color: #fff;
        box-shadow: 0 0 20px #ffcc00;
      }

      .animate-grid {
        animation: animate-grid 2s ease-in-out infinite alternate;
      }

      @keyframes animate-grid {
        from {
          grid-template-rows: repeat(3, 100px);
          grid-template-columns: repeat(3, 1fr);
        }
        to {
          grid-template-rows: repeat(3, 50px);
          grid-template-columns: repeat(3, 2fr);
        }
      }
    </style>
  </head>
  <body>
    <div class="grid-container animate-grid">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>
  </body>
</html>

Результат виконання кода:

Висновок

Grid-верстка — це потужний інструмент, який дозволяє легко керувати вмістом на сторінці. Але ця технологія не є універсальною і тому підходить не для всіх проєктів.

В одних випадках достатньо використовувати прості CSS-властивості, в інших — можуть виявитися ефективнішими фреймворки та бібліотеки (Foundation, Bulma та ін.).

Зубрити всі Grid-властивості — безглуздо. Використовуйте їх за потребою і, чим більше практики у вас буде, тим краще ви запам’ятаєте синтаксис. Якщо ви застосовуватимете технологію Grid-верстки у своїх проєктах часто, то опануєте її досить легко і швидко.

Верстальникам-початківцям, які тільки пробують працювати з грідами, допоможуть такі поради:

Використовуйте гріди у тих проєктах, де це можливо. З ними макет виглядатиме професійно, а легко сприйматиметься. Але не застосовуйте грід там, де він не потрібний.
Скорочуйте запис властивостей на грідах — це спростить ваш код і зробить його читабельнішим. При цьому пам’ятайте, що велика кількість шорткатів може бути недоречною.
Створюйте вкладені елементи відповідно до розмітки сітки. Кожен елемент повинен займати одну або кілька сіток, щоб зберегти симетрію і баланс.
Використовуйте медіа-запити. Так гріди можна легко адаптувати до різних розмірів екранів.
Не бійтеся експериментувати. Гріди дозволяють створювати незвичайні макети та експериментувати з різним розташуванням елементів. Використовуйте властивості грідів, щоб створити унікальний та цікавий дизайн, який привертатиме увагу користувачів.

Онлайн-курс "Режисура та візуальний сторітелінг" від Skvot.

Перетворюй свої ідеї на сильні історії в рекламі, кліпах чи кіно Досвідом ділиться режисер, продюсер та власник продакшену, який 10+ років у професії.

Детальніше про курс