Пошук уроків, статей та іншого контенту
Розглянемо призначення CSS Grid і перетворимо контейнер на сітку за допомогою властивості display: grid.
CSS Grid — це система компонування елементів у вигляді сітки з рядків і стовпців.
Grid зручно використовувати, коли потрібно розташувати дочірні елементи:
у кількох стовпцях;
у кількох рядках;
на однаковій відстані один від одного;
у межах контейнера.
Щоб увімкнути Grid для елемента, потрібно додати йому властивість:
.container {
display: grid;
}Елемент із display: grid називають Grid-контейнером, а його безпосередні дочірні елементи — Grid-елементами.
Розглянемо простий приклад:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>CSS Grid</title>
<style>
.container {
display: grid;
border: 2px solid #2563eb;
padding: 10px;
}
.item {
padding: 20px;
background-color: #dbeafe;
border: 1px solid #1d4ed8;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Елемент 1</div>
<div class="item">Елемент 2</div>
<div class="item">Елемент 3</div>
</div>
</body>
</html>У цьому прикладі:
.container — Grid-контейнер;
.item — Grid-елементи;
display: grid вмикає для контейнера режим CSS Grid.
Після додавання display: grid браузер починає розміщувати дочірні елементи за правилами Grid.
Самого display: grid достатньо, щоб увімкнути Grid, але без додаткових властивостей елементи за замовчуванням розміщуються в одному стовпці:
Елемент 1
Елемент 2
Елемент 3Це відбувається тому, що браузер автоматично створює новий рядок для кожного наступного елемента.
Щоб побачити межі контейнера й елементів, можна додати border:
.container {
display: grid;
border: 2px solid #2563eb;
}
.item {
border: 1px solid #1d4ed8;
}Важливо розрізняти:
display: grid вмикає режим сітки;
властивості на кшталт grid-template-columns визначають структуру сітки.
Розглянемо структуру HTML:
<div class="products">
<article class="product">Товар 1</article>
<article class="product">Товар 2</article>
<article class="product">Товар 3</article>
</div>У цьому випадку:
.products є контейнером, для якого можна встановити display: grid;
три елементи .product є його Grid-елементами.
.products {
display: grid;
}
.product {
padding: 16px;
background-color: #f3f4f6;
}Grid впливає на безпосередні дочірні елементи контейнера. Якщо всередині .product є інші елементи, вони не стають Grid-елементами контейнера .products.
Наприклад:
<div class="products">
<article class="product">
<h2>Товар 1</h2>
<p>Опис товару</p>
</article>
</div>У цьому прикладі Grid-елементом є article.product, а не його h2 чи p.
Створимо список карток і перетворимо його контейнер на Grid-контейнер:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Картки товарів</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 24px;
font-family: Arial, sans-serif;
background-color: #f8fafc;
}
.products {
display: grid;
gap: 16px;
max-width: 800px;
margin: 0 auto;
padding: 16px;
border: 2px solid #2563eb;
background-color: #ffffff;
}
.product {
padding: 20px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background-color: #eff6ff;
}
.product h2 {
margin-top: 0;
color: #1e3a8a;
}
</style>
</head>
<body>
<main class="products">
<article class="product">
<h2>Ноутбук</h2>
<p>Потужний ноутбук для роботи.</p>
</article>
<article class="product">
<h2>Монітор</h2>
<p>Монітор із якісним зображенням.</p>
</article>
<article class="product">
<h2>Клавіатура</h2>
<p>Зручна клавіатура для щоденного використання.</p>
</article>
</main>
</body>
</html>Основна частина прикладу:
.products {
display: grid;
}Вона вмикає CSS Grid для елемента main. Властивість gap додає проміжок між Grid-елементами, але не змінює сам факт увімкнення Grid.
Без display: grid дочірні div або article зазвичай розміщуються як блокові елементи один під одним. Після додавання display: grid контейнер починає використовувати правила Grid.
.products {
display: grid;
}Проте на цьому етапі Grid ще не має явно заданих стовпців. Тому елементи все одно розташовуються в одному стовпці, але вже всередині Grid-контейнера.
Це важливе розділення:
спочатку контейнеру задають display: grid;
потім налаштовують рядки, стовпці, проміжки та інше розташування.
display: block.block-container {
display: block;
}
.grid-container {
display: grid;
}Обидва значення можуть призвести до вертикального розташування елементів у простому прикладі. Але вони створюють різні типи контейнерів:
block використовує звичайний блоковий потік;
grid створює Grid-контейнер і дозволяє керувати розташуванням елементів через властивості CSS Grid.
Якщо контейнер має бути основою для сітки, використовують саме:
.container {
display: grid;
}display: grid не тому елементуGrid потрібно задавати контейнеру, чиї безпосередні дочірні елементи мають розташовуватися в сітці:
/* Правильно */
.cards {
display: grid;
}Якщо встановити display: grid окремій картці, Grid буде застосовано до її власного вмісту, а не до всіх карток.
.container {
display: grid;
}Цей код лише вмикає Grid. Він не створює автоматично кілька видимих стовпців. Без налаштування структури елементи зазвичай розміщуються в одному стовпці.
Grid керує безпосередніми дочірніми елементами контейнера:
<div class="container">
<div class="item">Елемент</div>
</div>Якщо потрібний елемент знаходиться глибше у вкладеній структурі, він не стане Grid-елементом зовнішнього контейнера.
display: grid і стилями елементів.container {
display: grid;
}
.item {
display: grid;
}У цьому прикладі обидва елементи можуть бути Grid-контейнерами, але на різних рівнях:
.container керує своїми дочірніми елементами;
.item керує своїм власним вмістом.
CSS Grid — це система компонування елементів у рядках і стовпцях.
Властивість display: grid перетворює елемент на Grid-контейнер.
Безпосередні дочірні елементи Grid-контейнера стають Grid-елементами.
Саме display: grid вмикає Grid, але ще не задає кількість стовпців.
Для початку роботи із сіткою достатньо:
.container {
display: grid;
}