Пошук уроків, статей та іншого контенту
Навчимося задавати елементам кілька колонок або рядків і створювати області різного розміру.
spanУ CSS Grid властивості grid-column і grid-row визначають, які колонки та рядки займає елемент.
За замовчуванням елемент займає одну клітинку:
.card {
grid-column: span 1;
grid-row: span 1;
}Значення span дозволяє вказати, скільки треків має займати елемент:
.card {
grid-column: span 2;
grid-row: span 3;
}У цьому прикладі елемент займає:
дві колонки;
три рядки.
Важливо: span задає кількість колонок або рядків, а не їхній конкретний номер.
Створімо сітку з чотирьох колонок:
.dashboard {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}Елемент, який має займати дві колонки, можна описати так:
.card {
grid-column: span 2;
}Еквівалентний запис із номерами ліній:
.card {
grid-column: 1 / 3;
}Лінія 1 — початок першої колонки, а лінія 3 — початок третьої. Отже, простір між ними охоплює дві колонки.
Значення span 2 зручніше, коли неважливо, з якої саме колонки почнеться елемент:
.card {
grid-column: span 2;
}Для об’єднання рядків використовується grid-row:
.card {
grid-row: span 2;
}Елемент займе дві клітинки по вертикалі.
Так само можна вказати конкретні лінії:
.card {
grid-row: 1 / 3;
}Це також означає, що елемент займатиме два рядки: від першої до третьої горизонтальної лінії.
Для створення великої області можна поєднати обидві властивості:
.featured-card {
grid-column: span 2;
grid-row: span 2;
}Такий елемент займатиме прямокутну область розміром 2 × 2 клітинки.
Нижче наведено сторінку статистики. Велика картка займає дві колонки та два рядки, деякі картки розтягуються на дві колонки, а маленькі картки займають одну клітинку.
<!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: 32px;
font-family: Arial, sans-serif;
background: #f1f5f9;
color: #172033;
}
.dashboard {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
max-width: 1000px;
margin: 0 auto;
}
.card {
min-height: 140px;
padding: 24px;
border-radius: 16px;
background: white;
box-shadow: 0 8px 24px rgb(15 23 42 / 8%);
}
.card h2,
.card h3 {
margin-top: 0;
}
.card p {
margin-bottom: 0;
color: #64748b;
}
.featured {
grid-column: span 2;
grid-row: span 2;
background: #2563eb;
color: white;
}
.featured p {
color: #dbeafe;
}
.users {
grid-column: 3;
grid-row: 1;
}
.orders {
grid-column: 4;
grid-row: 1;
}
.tasks {
grid-column: 3 / span 2;
grid-row: 2;
}
.revenue {
grid-column: 1 / span 3;
grid-row: 3;
}
.projects {
grid-column: 4;
grid-row: 3;
}
@media (max-width: 700px) {
.dashboard {
grid-template-columns: 1fr;
}
.card,
.featured,
.users,
.orders,
.tasks,
.revenue,
.projects {
grid-column: auto;
grid-row: auto;
}
}
</style>
</head>
<body>
<main class="dashboard">
<section class="card featured">
<h2>Огляд команди</h2>
<p>Основні показники за поточний місяць.</p>
</section>
<section class="card users">
<h3>Користувачі</h3>
<p>12 480 активних користувачів</p>
</section>
<section class="card orders">
<h3>Замовлення</h3>
<p>1 284 нових замовлення</p>
</section>
<section class="card tasks">
<h3>Завдання</h3>
<p>78% завдань виконано вчасно.</p>
</section>
<section class="card revenue">
<h3>Дохід</h3>
<p>Дохід зріс на 18% порівняно з попереднім місяцем.</p>
</section>
<section class="card projects">
<h3>Проєкти</h3>
<p>24 активні проєкти</p>
</section>
</main>
</body>
</html>У цьому прикладі:
.featured {
grid-column: span 2;
grid-row: span 2;
}елемент починається з доступної позиції та займає дві колонки й два рядки.
.tasks {
grid-column: 3 / span 2;
}означає: почати з третьої колонки та зайняти ще дві колонки.
.revenue {
grid-column: 1 / span 3;
}означає: почати з першої колонки та розтягнутися на три колонки.
span разом із номерами лінійФормат властивостей може бути таким:
.element {
grid-column: початок / кінець;
grid-row: початок / кінець;
}Наприклад:
.element {
grid-column: 2 / 5;
grid-row: 1 / 3;
}Елемент:
починається з вертикальної лінії 2;
закінчується на вертикальній лінії 5;
займає три колонки;
починається з горизонтальної лінії 1;
закінчується на горизонтальній лінії 3;
займає два рядки.
Замість кінцевої лінії можна використовувати span:
.element {
grid-column: 2 / span 3;
grid-row: 1 / span 2;
}Це означає те саме: почати з другої колонки та зайняти три колонки, почати з першого рядка та зайняти два рядки.
Використовуйте span, коли важлива кількість зайнятих треків:
.card {
grid-column: span 2;
}Це особливо зручно під час автоматичного розміщення елементів.
Використовуйте номери ліній, коли елемент має знаходитися в конкретній області сітки:
.sidebar {
grid-column: 1;
grid-row: 1 / 4;
}Такий запис розміщує бічну панель у першій колонці та розтягує її на три рядки.
Якщо елемент не вміщується в поточному рядку, CSS Grid може перемістити його на наступний рядок. Наприклад:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.item {
grid-column: span 2;
}Кожен .item займає дві колонки. Оскільки в одному рядку є лише три колонки, після першого елемента другий може перейти на наступний рядок.
Тому під час побудови складного макета потрібно враховувати:
кількість колонок у сітці;
уже зайняті клітинки;
розмір елементів через span;
явні позиції grid-column і grid-row.
.card {
grid-column: 2;
}Це не означає «зайняти дві колонки». Властивість означає «розмістити елемент у колонці номер 2».
Для об’єднання двох колонок потрібно написати:
.card {
grid-column: span 2;
}grid-column і grid-row працюють для безпосередніх дочірніх елементів контейнера з display: grid:
.container {
display: grid;
}Якщо display: grid задано не батьківському елементу, а іншому рівню HTML-структури, властивості можуть не дати очікуваного результату.
spanЯкщо сітка має чотири колонки:
.container {
grid-template-columns: repeat(4, 1fr);
}то елемент не може повністю зайняти п’ять колонок у межах одного рядка:
.card {
grid-column: span 5;
}У такій ситуації браузер створить додаткові треки або перемістить елемент відповідно до правил Grid, що може змінити очікувану структуру макета.
span для складного фіксованого макетаspan добре підходить для відносного розміру:
.card {
grid-column: span 2;
}Але якщо елемент повинен бути в конкретному місці, краще явно задати його позицію:
.card {
grid-column: 3 / 5;
grid-row: 1 / 3;
}grid-column: span N розтягує елемент на N колонок.
grid-row: span N розтягує елемент на N рядків.
grid-column: start / end задає початкову та кінцеву вертикальні лінії.
grid-row: start / end задає початкову та кінцеву горизонтальні лінії.
Запис start / span N дозволяє вказати початок і кількість треків.
span зручний для створення областей різного розміру.
Для точної фіксованої позиції варто використовувати номери ліній.