Red cat sitting on the window and looks out through the black grid.
Зміст
Після прочитання цієї статті ви знатимете про технологію Grid CSS все: навчитеся швидко і точно розташовувати вебелементи, а також зможете створювати адаптивний вебдизайн для будь-яких вебпроєктів.
Цікаво? Тоді почнемо.
Якщо ви придивитеся до дизайну більшості вебсторінок, ви побачите, що контент на них впорядкований, а всі елементи розташовані рівно.
Наприклад, сайт може складатися з бокового блоку, футера, контентної частині та мати шапку (header):
Щоб дизайн сайту не виглядав абияк, ці блоки акуратно вирівнюють відносно один одного. При цьому враховують адаптивність сайту: при масштабуванні елементи не повинні зрушуватись та ускладнювати сприйняття контенту.
Це досить складне завдання, якщо контенту на сайті багато, а інтерфейс нестандартний.
Для налаштування розташування елементів сайту використовується умовна решітка (сітка), яка називається grid. Блоки сайту вибудовують із прив’язкою до grid-макету, який виглядає як масив комірок усередині сітки.
Якщо сітку почати масштабувати, комірки з елементами сайту автоматично адаптуватимуться до різних пристроїв і різних роздільних здатностей екрана.
Використовуючи верстку по сітці (grid), розробники можуть легко керувати розміром, позиціонуванням та порядком шарів сторінки.
Також верстка за грідами (або на основі grid-макету) допомагає керувати видимістю блоків, переходами, відступами та іншими розмічальними засобами CSS для створення реактивних та адаптивних інтерфейсів.
Одне з фундаментальних понять у верстці — це Grid Layout або макет сітки. На сленгу верстальники часто називають їх просто грідами.
Такий макет виглядає як розкладка з вертикальних та горизонтальних ліній, які утворюють стовпці та рядки. Його головне призначення — поділ площі вебсторінки для впорядкованого розміщення елементів на ній, а також проєктування вебсайту з адаптивним дизайном.
Адаптивний вебдизайн — це дизайн, який забезпечує коректне відображення вмісту сайту, незалежно від розміру вікна браузера.
Grid Layouts нагадують таблиці, але з їх допомогою них простіше працювати з вебпримітивами.
Наприклад, завдяки ним, дочірні елементи grid-контейнеру можуть нашаруватися один на інший.
Створимо макет вебсторінки з базовою розміткою та на прикладі розглянемо властивості Grid Layout.
У файлі з 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);
}
Ось що виведе такий код:
Для того, щоб позначити батьківський елемент box як частину grid-макету, ми повинні встановити властивості CSS display: grid;. Після того, як ми це зробимо, візуально нічого не зміниться, але властивості елементів будуть іншими, тому що тепер ми працюємо з грід-розміткою.
Щоб керувати розміткою, потрібно встановити її параметри:
Для опису стовпців Grid Layout використовується команда grid-template-columns:.
Припустимо, нам необхідно встановити два стовпці, шириною 200 та 300 пікселів відповідно. Для цього пишемо такий CSS-код:
.box{
display: grid;
grid-template-columns: 200px 300px ;
}
Оскільки ми вказали два значення (200px та 300px), ми отримали два стовпці:
Вкажи ми три значення, ми отримали б три стовпці, чотири значення — чотири, тощо.
Значення, які описують розміри, можуть бути вказані в будь-яких одиницях розмірності, що використовуються в CSS:
px;vh;rem;%.Наприклад, якщо додатково вказати 15%, ми отримаємо третій стовпець, ширина якого буде автоматично визначена як 15% від ширини елемента box:
.box{
display: grid;
grid-template-columns: 200px 300px 15% ;
}
Бачимо, що під час виконання цього коду з’явилася проблема: остання комірка змістилась на новий рядок. Щоб це виправити, створимо четвертий стовпець та вкажемо для нього ширину auto:
.box{
display: grid;
grid-template-columns: 200px 300px 15% auto ;
}
Тепер на макеті у нас є чотири стовпці:
box;Зауважте, що параметр auto (всупереч логіці) не означає «рівномірне» заповнення. Якщо вказати ширину останніх двох стовпців auto, ми отримаємо різну ширину для третього і четвертого стовпця. У цьому легко переконатись за допомогою інструментів для розробника.
Справа в тому, що ширина стовпця з параметром auto розраховується залежно від кількості контенту, що його заповнює. Тому, якщо вказати цей параметр для нашого випадку, всі стовпці вийдуть різного розміру.
Щоб вказати рівні розміри елементів сітки, використовуйте спеціальну одиницю виміру — фракцію (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-template-rows. Налаштування цієї властивості ідентичні параметрам grid-template-columns. Тут також можна використовувати будь-які розмірності для вказівки висоти рядків (відсотки, пікселі, фракції тощо), а також застосовувати repeat для швидкого опису властивостей груп рядків.
Вкажемо у стилях такі параметри:
.box{
display: grid;
grid-template-columns: repeat( 3, 400px );
grid-template-rows: 100px 300px 150px;
}
І отримаємо такий макет для верстки:
Оскільки ми не задали явно розміри четвертого, п’ятого і шостого рядків, наш макет сам надав значення відсутнім параметрам.
У процесі верстки потрібно постійно пам’ятати і враховувати, що розмір контенту (особливо у динамічних сайтах) непостійний, його може бути як більше, так і менше. Тому якщо висота рядків не задана, макет підлаштовує висоту комірок під обсяг наявного контенту.
Ще одна властивість, яка потрібна при розробці дизайну сайту — це відстань між комірками або gap. Ви можете визначати як розмір відступу між стовпцями, так і відстань, яка розділяє горизонтальні ряди комірок:
.box{
display: grid;
grid-template-columns: repeat( 3, 400px );
grid-template-rows: 100px 200px 150px;
column-gap: 20px; // Для відступу між стовпцями
row-gap: 40px; // Для відступу між рядами
}
Результат виконання кода:
Зверніть увагу, що праворуч і ліворуч ніяких полів відступу не додалося, а комірки виявилися притиснуті до свого батьківського контейнера. Щоб це виправити, замість column-gap і row-gap можна використовувати інший запис, що поєднує обидві властивості:
gap: 35px 15px; // Перший аргумент — відступ між рядками, другий — відстань між стовпцями.
Ось як тепер виглядатиме макет:
Якщо потрібно лише одне значення, навпроти непотрібного відступу можна просто поставити 0 (gap: 0 15px;):
Якщо вказати лише одне значення, наприклад, gap: 20px;, відступ буде автоматично призначений як для відстані між рядками, так і для відступу між стовпцями:
За замовчуванням прописані властивості застосовуються до 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; //число вказує на кількість займаємих комірок}
Елемент займатиме перші дві комірки в ряді:
Якщо потрібно, щоб елемент зайняв також дві комірки в стовпцях, використовуємо властивість grid-row-start: span 2;.
Span у цьому випадку означає, що елемент повинен збільшитись на дві частини з того місця, де він стояв.
При роботі з CSS-модулем розкладки Flexible Box (або просто флексбокс) побудова елементів відбувається щодо головної та поперечної осей. У цьому випадку також задіюється технологія верстки Grid Layouts, тому побудова виконується щодо grid-ліній.
Хоча ці лінії ми не бачимо, ми можемо їх відобразити в інструментах для розробника. Для цього перейдіть у перегляд структури HTML-коду, знайдіть кнопку grid у батьківському елементі div класу box, а потім натисніть на неї:
Напрямні верстки (гріди) стануть помітні:
Номери grid-ліній можна сприймати як координати комірок елементів. Завдяки цьому можна позиціонувати кожну комірку по всій grid-розкладці.
Наприклад, якщо вказати для елемента 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;
}
Таким самим способом можна керувати і числом комірок, які зайняті по вертикалі, використовуючи властивості grid-row-start і grid-row-end:
Зверніть увагу: незважаючи на те, що комірка зрушила праворуч, у розмітці вона, як і раніше, стоїть першою.
Якщо вам необхідно уточнити положення комірки за координатами, використовуйте grid-row-start та grid-row-end. Якщо потрібно вказати положення без прив’язки до координат, використовуйте span.
Перелічувати значення цих властивостей найзручніше через слеш:
.item-1{
grid-column: 2/4;
grid-row: 1/3;
}
В обох випадках перша цифра відповідає параметру start, а друга — end.
Результат буде той самий:
Також можна комбінувати аргументи властивостей, поєднуючи їх зі span:
.item-1{
grid-column: 2/4;
grid-row: 2/ span 2;
}
Якщо звернете увагу на нумерацію 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>
У файлі з 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;
}
Припустимо, що у шаблон потрібно вставити порожню комірку. Наприклад, щоб блок 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:
grid-auto-rows можна задавати кілька значень, описуючи черговість висот комірок, що з’являтимуться. Наприклад, якщо вказати grid-auto-rows: 125px 225px;, то при таких параметрах ми отримаємо макет, де:
100px;200px;150px;125px;225px;125px;225px.Восьмий знову набуде значення 125px, а далі цифри повторюватимуться відповідно до значень висот, зазначених у grid-auto-rows.
У міру додавання контенту на сторінку сайту кількість блоків може поступово зростати. Комірки, що додаються в розмітку, щоразу генерують нові рядки. Така поведінка пояснюється властивістю 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;
}
Додавання нової властивості до грід-контейнера вирішує цю проблему:
.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;:
У процесі верстки часто використовується значення 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;
}
Додаємо у властивості контейнера grid-template-columns: 400px 400px 400px minmax(200px, 500px);. Цей запис означає, що четверта комірка повинна втискатися в 200px, якщо в грід-контейнері мало місця, або розтягуватися до 500px, якщо місця достатньо.
Наступна властивість, яка обов’язково стане в нагоді при роботі над макетом — 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:
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;
}
Нерідко потрібно звернутися до якоїсь конкретної комірки, наприклад, сьомої. У цьому випадку потрібно використовувати не 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;
}
Властивість align-self дозволяє встановити вирівнювання для кожного окремого елемента сітки, а не для всієї сітки повністю. Так, якщо використовуючи селектор першої комірки, вказати значення end, перший елемент вирівнюється за нижнім краєм:
.item-1{
grid-column: 1 / 3;
grid-row: 1 / span 2;
align-self: end;
}
Змінивши значення на align-self: baseline;, ми побачимо, як вміст комірки «підстрибнув», тобто був вертикально вирівняний всередині комірки щодо базової лінії рядка:
Синтаксис властивостей, які використовуються при верстці за грідами має особливість — він може застосовуватися як у повному варіанті назви властивостей, так і зі скороченнями (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будуть відображатися для наочності:
Якщо потрібно розділити значення для 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?
Універсальної відповіді на це питання немає — розуміння цих інструментів приходить із практикою. Тим не менш, ряд закономірностей все ж таки можна вивести. Віддаючи перевагу на користь однієї з технологій, ви повинні відповісти собі на два питання:
Також не забувайте, що технологію верстки по грідах можна легко поєднувати з Flexbox, тому робити однозначний вибір необов’язково.
Ми вже розглянули багато прикладів, тож можемо підбити проміжні підсумки.
Верстка з використанням грідів — це зручно, зрозуміло та швидко. Макети на грідах наочні, тому веброзробникам зручно доопрацьовувати такі проєкти, вносити до них зміни. Отже можна виділити п’ять основних переваг цієї технології:
Розглянемо реальний проєкт — створимо адаптивну верстку головної сторінки для вебмагазину, де елементами макету є картки з товаром (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;
}
Результат:
Після того, як ми вкажемо всі області, додаємо властивості:
.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-макет міститиме елементи з комірками, розставленими у потрібному нам порядку та на бажаних областях:
Оскільки ми позиціонуємо елементи, звертаючись до класів, ми можемо в батьківському блоці поміняти черговість елементів — це не вплине на грід-макет:
<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>
Встановимо властивість justify-content: center;. Висота картки з товаром у нас 380px, тому оберемо як значення висоти неявного ряду саме це число.
Тепер перейдемо до адаптивності.
Як тільки для виводу на екрані буде менше 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-макета буде відображатися у вигляді сітки з чотирма стовпцями.
Якщо ми перейдемо на екран меншого розширення, макет верстки буде показуватися вже інший, з комірками, розміщеними у два стовпця.
Аналогічний принцип використовується і для мобільної версії з точкою медіа-запиту на 409px. У цьому випадку треба підкоригувати грід-шаблон таким чином, щоб контент, що виводиться на екран, містився тільки в один стовпець:
Фінальный код виглядає так:
.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'
;
}
}
Одна з найцікавіших опцій CSS-верстки — анімація. Деякі властивості грідів також можна анімувати, створюючи цікаві дизайнерські ідеї.
Створимо простий блок:
<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-контейнер.
Наступний приклад — анімація стовпців, що розсуваються.
Код 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. Використовуйте її лише тоді, коли немає інших варіантів.
Третій варіант анімації із 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;
}
Результат:
Приклад макету анімованого меню на грідах. Код 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);
}
Цей приклад містить меню на основі грід-макета, пункти якого анімовані при наведенні на них курсором:
У наступному прикладі створюється контейнер із класом .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-верстки у своїх проєктах часто, то опануєте її досить легко і швидко.
Верстальникам-початківцям, які тільки пробують працювати з грідами, допоможуть такі поради:
32-річний розробник безпеки інформаційних систем Агентства національної безпеки Джарех Себастьян Далке отримав 22 роки в'язниці…
Українська компанія Flytech представила розвідувальний безпілотний літальний апарат ARES. Основні його переваги — недорога ціна…
MC.today разом з Асоціацією IT Ukraine і сервісом моніторингу та аналітики згадок у ЗМІ та…
Україна не буде примусово повертати чоловіків призовного віку з-за кордону. Про це повідомила у Брюсселі…
В Збройних Силах України з'явився жіночий підрозділ з БПЛА. І вже проводиться конкурсний відбір до…
GitHub анонсував Copilot Workspace, середовище розробки з використанням «агентів на базі Copilot». За задумкою, вони…