HTML & CSS

CSS Grid. Двовимірний макет. Частина 1

Глибоке занурення у CSS Grid Layout: display grid, одиниця fr, repeat(), minmax(), auto-fill, auto-fit, розміщення елементів через grid-column та grid-row, gap. Основи двовимірної сітки.

CSS Grid. Двовимірний макет

Коли одного виміру стає замало

Уявіть, що ви верстаєте типову сторінку сучасного застосунку: зліва — бічна панель навігації, зверху — шапка, в центрі — основний контент, знизу — підвал. Flexbox впорається з розміщенням елементів усередині кожного з цих блоків, але організувати весь цей каркас в двох вимірах одночасно — горизонтально та вертикально — він не призначений. Саме тут на сцену виходить CSS Grid Layout.

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

У попередній статті ми детально розглянули Flexbox. Ця стаття — логічне продовження: ми з'ясуємо, коли Grid краще, ніж Flexbox, і навчимося будувати справжні сторінкові макети.

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

Передумови та еволюція

До появи Grid Layout веб-розробники будували багатоколонкові макети за допомогою float, потім — через Flexbox з flex-wrap. Обидва підходи мали критичний недолік: вони були одновимірними. Потрібен рядок? Будь ласка. Потрібна колонка? Теж без проблем. Але контролювати одночасно і рядки, і колонки — це вже завдання для Grid.

Специфікацію CSS Grid розробляла команда Microsoft ще у 2011 році (під Internet Explorer 10 з префіксом -ms-grid). Стандартна версія без префіксів стала доступна в усіх сучасних браузерах у 2017 році — це була революція у веб-верстці.

Loading diagram...

Базова концепція: контейнер і клітинки

Як і Flexbox, Grid ґрунтується на взаємодії контейнера (grid container) та елементів (grid items):

Grid-контейнер — елемент з display: grid. Він задає структуру сітки.
Grid-елементи — прямі дочірні елементи контейнера. Вони автоматично розміщуються у клітинках сітки.
Grid-лінії (grid lines) — горизонтальні та вертикальні лінії, що утворюють сітку. Нумерація починається з 1.
Grid-доріжки (grid tracks) — рядки (rows) і колонки (columns) між сусідніми лініями.
Grid-клітинка (grid cell) — найменша одиниця сітки, перетин рядка і колонки.
Grid-область (grid area) — прямокутна зона з однієї або кількох клітинок.

Loading diagram...

.container {
    display: grid; /* Активує Grid Layout */
}

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

`grid-template-columns` та `grid-template-rows`

Ці дві властивості — серце всього Grid Layout. Вони визначають розмір і кількість колонок та рядків відповідно.

Синтаксис

Значення — це список розмірів, розділених пробілами. Кожне значення описує одну доріжку:

.container {
    display: grid;
    grid-template-columns: 200px 400px 200px; /* 3 колонки */
    grid-template-rows: 80px 1fr 60px; /* 3 рядки */
}

Розберемо, що тут відбувається:

grid-template-columns: 200px 400px 200px — три колонки фіксованої ширини: 200px, 400px та 200px. Разом 800px. Все, що залишається після них, — порожній простір.
grid-template-rows: 80px 1fr 60px — три рядки. Перший і третій мають фіксовану висоту, а другий (1fr) займає весь простір, що залишився.

Preview

🔒localhost:3000

<div class="grid-basic">
    <div class="item header-cell">Шапка<br /><small>col: 1-4</small></div>
    <div class="item sidebar-cell">Бічна<br />панель</div>
    <div class="item main-cell">Основний контент</div>
    <div class="item footer-cell">Підвал<br /><small>col: 1-4</small></div>
</div>

.grid-basic {
    display: grid;
    grid-template-columns: 150px 1fr;
    grid-template-rows: 60px 200px 50px;
    gap: 8px;
    padding: 12px;
    background: #f1f5f9;
    border-radius: 10px;
    font-family: system-ui, sans-serif;
}

.item {
    background: #6366f1;
    color: white;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    padding: 0.5rem;
}

.item small {
    font-size: 0.7rem;
    opacity: 0.8;
    margin-top: 2px;
}

.header-cell {
    grid-column: 1 / 3;
    background: #4f46e5;
}

.sidebar-cell {
    background: #7c3aed;
}

.main-cell {
    background: #2563eb;
}

.footer-cell {
    grid-column: 1 / 3;
    background: #4f46e5;
}

У прикладі ми вже використали grid-column: 1 / 3 — це розміщення елемента, яке ми детально розглянемо далі. Поки зверніть увагу на те, як Grid бере під контроль увесь простір.

Одиниця `fr` — частка вільного простору

Одиниця fr (fractional unit, частка) — це нова одиниця виміру, введена спеціально для CSS Grid. Вона означає "частку вільного простору в контейнері" і не є відсотком чи пікселем.

Як працює `fr`

Алгоритм розрахунку простий:

Браузер відраховує фіксовані розміри (px, em, auto та ін.).
Залишок вільного простору ділиться між усіма fr-доріжками пропорційно до їх коефіцієнтів.

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    /* Вільний простір = 100% - gap */
    /* 1fr = 25% вільного | 2fr = 50% | 1fr = 25% */
}

Preview

🔒localhost:3000

<p class="label">1fr 1fr 1fr — три рівні колонки</p>
<div class="fr-grid" style="grid-template-columns: 1fr 1fr 1fr;">
    <div class="item">1fr</div>
    <div class="item">1fr</div>
    <div class="item">1fr</div>
</div>

<p class="label">1fr 2fr 1fr — середня вдвічі ширша</p>
<div class="fr-grid" style="grid-template-columns: 1fr 2fr 1fr;">
    <div class="item">1fr</div>
    <div class="item wide">2fr</div>
    <div class="item">1fr</div>
</div>

<p class="label">200px 1fr 1fr — перша фіксована, решта ділять залишок</p>
<div class="fr-grid" style="grid-template-columns: 200px 1fr 1fr;">
    <div class="item fixed">200px</div>
    <div class="item">1fr</div>
    <div class="item">1fr</div>
</div>

.label {
    font-family: system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    margin: 0.75rem 0 0.2rem;
}

.fr-grid {
    display: grid;
    gap: 8px;
    padding: 10px;
    background: #f1f5f9;
    border-radius: 8px;
}

.item {
    background: #6366f1;
    color: white;
    border-radius: 5px;
    padding: 0.75rem 0.5rem;
    font-family: system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
}

.item.wide {
    background: #4f46e5;
}

.item.fixed {
    background: #7c3aed;
}

fr vs %: відсоток береться від ширини всього контейнера, через що виникають проблеми з gap — сума відсотків перевищить 100%. Одиниця fr враховує gap автоматично, оскільки бере тільки вільний простір після відрахування проміжків. Завжди надавайте перевагу fr над % у Grid.

`repeat()` — стислий запис повторюваних доріжок

Написати 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr для дванадцятиколонної сітки — незручно та негарно. Функція repeat() вирішує цю проблему:

.container {
    /* Замість: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr */
    grid-template-columns: repeat(12, 1fr); /* Дванадцять рівних колонок */
}

Синтаксис `repeat()`

repeat(кількість, розмір-або-шаблон)

Перший аргумент — кількість повторень. Другий — шаблон (може містити кілька значень):

.container {
    /* Повторити шаблон "80px 1fr" тричі → тобто 6 колонок */
    grid-template-columns: repeat(3, 80px 1fr);
    /* Результат: 80px 1fr 80px 1fr 80px 1fr */
}

repeat() також може приймати спеціальні ключові слова auto-fill та auto-fit замість числа — про них поговоримо в наступному розділі.

`minmax()` — гнучкі межі розміру

Функція minmax(мінімум, максимум) дозволяє задати діапазон розміру для доріжки: вона буде не меншою за мінімум і не більшою за максимум.

.container {
    /* Колонки: мінімум 200px, максимум — рівна частка вільного простору */
    grid-template-columns: repeat(3, minmax(200px, 1fr));
}

Це надзвичайно корисно для адаптивних сіток: колонки ніколи не звужуються нижче 200px, але при великому екрані рівномірно заповнюють весь простір.

`auto` як значення `minmax`

Ключове слово auto у minmax() означає: мінімум — розмір контенту, максимум — весь доступний простір:

grid-template-columns: minmax(auto, 1fr); /* те саме, що просто 1fr */
grid-template-rows: minmax(100px, auto); /* мінімум 100px, далі росте за контентом */

`auto-fill` та `auto-fit` — справді адаптивні сітки

Це найпотужніша комбінація у CSS Grid — repeat() з auto-fill або auto-fit і minmax(). Вона дозволяє автоматично визначати кількість колонок залежно від доступного простору, без media queries.

`auto-fill` — заповни доріжками, навіть порожніми

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

Браузер запитує: "Скільки колонок шириною щонайменше 200px вміститься в контейнер?" Якщо контейнер 800px — це 4 колонки. Якщо 1200px — 6 колонок. Колонки з'являються та зникають автоматично. При auto-fill, якщо елементів замало, порожні доріжки все одно зберігаються (займають місце).

`auto-fit` — зтисни порожні доріжки

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

Різниця від auto-fill: коли елементів менше, ніж максимально можлива кількість колонок, auto-fit зтискає порожні доріжки до 0 і розтягує наявні елементи на весь простір.

.fill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}
/* Якщо контейнер 600px і є лише 2 елементи:
   Утворяться 4 колонки (4 × 150px = 600px).
   Перші 2 заповнені, останні 2 — порожні, але займають місце.
   Елементи НЕ розтягуються на весь рядок. */

.fit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}
/* Якщо контейнер 600px і є лише 2 елементи:
   Порожні колонки зтискаються (collapse).
   2 елементи рівномірно ділять весь простір (по 1fr кожен = 50%).
   Елементи займають весь рядок. */

Preview

🔒localhost:3000

<p class="label">auto-fill — 3 елементи, порожні доріжки зберігаються</p>
<div class="af-grid fill">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

<p class="label">auto-fit — 3 елементи, займають весь рядок</p>
<div class="af-grid fit">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

.label {
    font-family: system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    margin: 0.75rem 0 0.25rem;
}

.af-grid {
    display: grid;
    gap: 8px;
    padding: 10px;
    background: #f1f5f9;
    border-radius: 8px;
}

.fill {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.fit {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.item {
    background: #6366f1;
    color: white;
    border-radius: 5px;
    padding: 1rem;
    font-family: system-ui, sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
}

Щоб побачити різницю між auto-fill та auto-fit найяскравіше, змініть ширину браузера або додайте більше елементів. При достатніх елементах поведінка однакова — різниця проявляється тільки коли елементів менше, ніж знаходиться колонок.

`gap` — проміжки в Grid

Властивість gap (раніше grid-gap) задає проміжки між рядками та колонками. Вживається одне або два значення:

.container {
    gap: 1rem; /* Однаковий відступ між рядками і колонками */
    gap: 16px 24px; /* row-gap column-gap */
    row-gap: 16px; /* Тільки між рядками */
    column-gap: 24px; /* Тільки між колонками */
}

gap не додає відступи по краях контейнера — тільки між елементами. Для відступів від країв використовуйте padding на контейнері. Ця поведінка часто дивує новачків, які очікують "поля" навколо сітки.

Grid-лінії: нумерація та іменування

Розуміння Grid-ліній — ключ до розміщення елементів. Уявіть сітку 3×3: вона має 4 вертикальні лінії (1, 2, 3, 4) та 4 горизонтальні лінії (1, 2, 3, 4). Нумерація завжди починається з 1, не з 0.

Вертикальні лінії:  1   2   3   4
                    |   |   |   |
Рядок 1:           [col1][col2][col3]
                    |   |   |   |
Рядок 2:           [col1][col2][col3]
                    |   |   |   |

Негативні числа рахуються з кінця: -1 — остання лінія, -2 — передостання тощо.

Loading diagram...

`grid-column` та `grid-row` — розміщення елементів

Ці властивості дозволяють елементу зайняти певну область сітки, вказавши початкову та кінцеву лінії:

.element {
    grid-column: початок / кінець; /* вертикальні лінії */
    grid-row: початок / кінець; /* горизонтальні лінії */
}

Вони є скороченнями для grid-column-start/grid-column-end та grid-row-start/grid-row-end:

/* Ці записи — еквівалентні */
.element {
    grid-column: 1 / 3;
}
/* Те саме: */
.element {
    grid-column-start: 1;
    grid-column-end: 3;
}

Ключове слово `span` — "займи N доріжок"

Замість вказування кінцевої лінії можна вказати, скільки доріжок має зайняти елемент через span:

.element {
    grid-column: 1 / span 2; /* Починаючи з лінії 1, займи 2 колонки */
    grid-row: span 3; /* Займи 3 рядки (від поточної позиції) */
}

Preview

🔒localhost:3000

<div class="placement-grid">
    <div class="item header">Шапка (1–3 col, рядок 1)</div>
    <div class="item sidebar">Сайдбар (col 1, рядki 2–3)</div>
    <div class="item main">Головний контент (col 2–3, рядок 2)</div>
    <div class="item widget">Віджет (col 2, рядок 3)</div>
    <div class="item ads">Реклама (col 3, рядок 3)</div>
    <div class="item footer">Підвал (col 1–3, рядок 4)</div>
</div>

.placement-grid {
    display: grid;
    grid-template-columns: 150px 1fr 120px;
    grid-template-rows: 55px 160px 120px 50px;
    gap: 8px;
    padding: 12px;
    background: #f1f5f9;
    border-radius: 10px;
    font-family: system-ui, sans-serif;
}

.item {
    background: #6366f1;
    color: white;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    padding: 0.5rem;
}

.header {
    grid-column: 1 / 4;
    background: #4f46e5;
}

.sidebar {
    grid-column: 1;
    grid-row: 2 / 4;
    background: #7c3aed;
}

.main {
    grid-column: 2 / 4;
    grid-row: 2;
    background: #2563eb;
}

.widget {
    grid-column: 2;
    grid-row: 3;
    background: #0891b2;
}

.ads {
    grid-column: 3;
    grid-row: 3;
    background: #059669;
}

.footer {
    grid-column: 1 / 4;
    background: #4f46e5;
}

Розберемо ключові властивості прикладу:

.header — grid-column: 1 / 4 — займає від лінії 1 до лінії 4, тобто всі 3 колонки (еквівалентно grid-column: 1 / span 3).
.sidebar — grid-row: 2 / 4 — займає від рядка 2 до рядка 4, тобто 2 рядки поспіль, створюючи "бічну панель на весь контент".
.main — grid-column: 2 / 4 — займає 2 і 3 колонку, пропустивши першу (там сайдбар).
.footer — grid-column: 1 / 4 — аналогічно шапці, тягнеться через увесь рядок.

Ця явна система розміщення — одна з найпотужніших особливостей Grid. Ви точно знаєте, де знаходиться кожен елемент, незалежно від порядку в HTML.

Від'ємні числа ліній

Від'ємна нумерація дуже корисна, коли ви хочете елемент, що завжди тягнеться до останньої лінії, навіть якщо ви не знаєте, скільки колонок у сітці:

.full-width {
    grid-column: 1 / -1; /* Від першої до останньої лінії — завжди всі колонки */
}

.last-two {
    grid-column: -3 / -1; /* Останні 2 колонки */
}

Це особливо зручно при динамічній сітці (auto-fill/auto-fit), де кількість колонок змінюється залежно від ширини екрана.

Автоматичне розміщення

Якщо ви не вказуєте grid-column і grid-row для елемента, Grid автоматично розміщує його в наступну вільну клітинку — зліва направо, зверху вниз. Це автоматичне розміщення (auto placement).

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Елементи самі розповзуться по 3 колонках */
}

Preview

🔒localhost:3000

<div class="auto-grid">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item wide">3 (span 2)</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
</div>

.auto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px;
    background: #f1f5f9;
    border-radius: 10px;
    font-family: system-ui, sans-serif;
}

.item {
    background: #6366f1;
    color: white;
    border-radius: 6px;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
}

.wide {
    grid-column: span 2;
    background: #4f46e5;
}

Зверніть увагу: елемент 3 займає 2 колонки (span 2). Браузер автоматично переносить елемент 4 на новий рядок, тому що в поточному рядку немає місця для 3 і 4 разом.

За замовчуванням автоматичне розміщення працює за рядками (grid-auto-flow: row). Можна змінити на grid-auto-flow: column — тоді елементи розміщуватимуться спочатку по стовпцю зверху вниз, потім переходять до наступного стовпця. Існує також grid-auto-flow: dense — алгоритм намагається "ущільнити" елементи, заповнюючи пробіли дрібнішими елементами.

`grid-auto-rows` та `grid-auto-columns` — неявна сітка

Коли елементів більше, ніж задано рядків у grid-template-rows, Grid автоматично створює нові рядки. Їх розмір за замовчуванням — auto (розмір контенту). grid-auto-rows дозволяє задати розмір для цих автоматично створених рядків:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 200px; /* Явно задано лише перший рядок */
    grid-auto-rows: 150px; /* Всі наступні (автоматичні) рядки — 150px */
}

Явна сітка (explicit grid) — та, яку ви задаєте через grid-template-*. Неявна сітка (implicit grid) — рядки/колонки, які Grid створює автоматично.

Preview

🔒localhost:3000

<div class="implicit-grid">
    <div class="item">
        1<br /><small>явний рядок<br />200px</small>
    </div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">
        4<br /><small>неявний рядок<br />100px</small>
    </div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">
        7<br /><small>ще один<br />неявний</small>
    </div>
</div>

.implicit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 200px;
    grid-auto-rows: 100px;
    gap: 8px;
    padding: 12px;
    background: #f1f5f9;
    border-radius: 10px;
    font-family: system-ui, sans-serif;
}

.item {
    background: #6366f1;
    color: white;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
}

.item:nth-child(n + 4) {
    background: #7c3aed;
}

.item small {
    font-size: 0.65rem;
    margin-top: 4px;
    opacity: 0.85;
}

Перший рядок (елементи 1–3) — явний, 200px. Наступні рядки (елементи 4–7) — неявні, 100px. Це критично важливо для карткових сіток: ви задаєте колонки, а кількість рядків не знаєте наперед — grid-auto-rows зробить усі автоматичні рядки однаковими.

Практика: Адаптивна картково-сітка

Об'єднаємо все вивчене: repeat(auto-fit, minmax(...)), gap, grid-auto-rows і скорочення span — щоб створити справжню адаптивну сітку карток без єдиного media query:

Визначити контейнер із авто-колонками

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
}

Колонки автоматично з'являтимуться/зникатимуть залежно від ширини контейнера. Мінімальна ширина картки — 280px.

Задати висоту рядків через `grid-auto-rows`

.cards {
    grid-auto-rows: auto; /* Рядки ростуть за контентом */
}

Виділити featured-картку на весь рядок

.card-featured {
    grid-column: 1 / -1; /* Завжди розтягнеться на всі колонки */
}

Preview

🔒localhost:3000

<section class="cards-section">
    <article class="card featured">
        <span class="tag">Рекомендовано</span>
        <h3>Вступ до CSS Grid</h3>
        <p>Найпотужніша система компонування в CSS для створення двовимірних макетів.</p>
        <a href="#" class="btn">Читати далі →</a>
    </article>
    <article class="card">
        <span class="tag">Основи</span>
        <h3>display: grid</h3>
        <p>Перший крок — активація Grid-контейнера.</p>
    </article>
    <article class="card">
        <span class="tag">Одиниці</span>
        <h3>Одиниця fr</h3>
        <p>Частка вільного простору — революційна одиниця Grid.</p>
    </article>
    <article class="card">
        <span class="tag">Функції</span>
        <h3>repeat() та minmax()</h3>
        <p>Стисле оголошення складних сіток з гнучкими розмірами.</p>
    </article>
</section>

.cards-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
    font-family: system-ui, sans-serif;
}

.card {
    background: white;
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
}

.card.featured {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tag {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6366f1;
    background: #eef2ff;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
}

.featured .tag {
    color: #4f46e5;
    background: rgba(255, 255, 255, 0.9);
}

.card h3 {
    margin: 0.25rem 0;
    font-size: 1rem;
    color: #1e293b;
}

.featured h3 {
    color: white;
    font-size: 1.2rem;
}

.card p {
    margin: 0;
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
}

.featured p {
    color: rgba(255, 255, 255, 0.85);
}

.btn {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    color: #4f46e5;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    width: fit-content;
}

Властивість `grid-template` — скорочення

grid-template — це скорочення, яке об'єднує grid-template-rows, grid-template-columns та grid-template-areas в один рядок:

.container {
    /* grid-template: рядки / колонки */
    grid-template: 80px 1fr 60px / 200px 1fr 1fr;
}
/* Еквівалентно: */
.container {
    grid-template-rows: 80px 1fr 60px;
    grid-template-columns: 200px 1fr 1fr;
}

Хоча запис стислий, він може заплутати. Рекомендація: на ранньому етапі вивчення завжди пишіть властивості окремо для ясності.

Резюме частини 1

У цій частині ми заклали фундамент розуміння CSS Grid:

display: grid

Активує Grid Layout на контейнері. Усі прямі дочірні елементи стають grid-елементами.

grid-template-columns / rows

Визначають кількість та розміри доріжок. Підтримують px, %, fr, auto, minmax(), repeat().

Одиниця fr

Частка вільного простору. Враховує gap автоматично. Завжди краще за % в контексті Grid.

repeat() + auto-fit + minmax()

Магічна комбінація для адаптивних сіток без media queries.

grid-column / grid-row

Явне розміщення елементів по лініях сітки. Підтримує span для охоплення кількох доріжок.

grid-auto-rows

Розмір рядків неявної сітки — тих, що Grid створює автоматично при переповненні.

У наступній частині ми розглянемо:

grid-template-areas — іменовані області (named areas)
place-items, place-content, place-self — вирівнювання в Grid
Flexbox vs Grid: коли що обирати
Практика: класичний page layout та masonry-сітка
Завдання трьох рівнів складності

Завдання для самоперевірки

Завдання 1.1. Створіть сітку з 4 рівних колонок та 3 рядків по 100px. Розмістіть у ній 8 елементів з номерами. Переконайтеся, що між ними є відступ 12px.

Завдання 1.2. Виправте помилку: чому grid-template-columns: 1fr 1fr 1fr; width: 100%; і далі три елементи по width: 33% дає непередбачуваний результат? Приберіть зайву властивість width з дочірніх елементів.

Завдання 1.3. Поясніть (словами або кодом), у чому різниця між:

grid-template-columns: 1fr 1fr;
/* і */
grid-template-columns: 50% 50%;

Підказка: додайте gap: 20px і подивіться.

Продовження: CSS Grid. Частина 2 — Named Areas, вирівнювання, Flexbox vs Grid

Edit this pageorReport an issue

CSS Flexbox: Вирівнювання та Позиціонування

Глибоке занурення у вирівнювання Flex-елементів: justify-content, align-items, align-self, align-content та практика абсолютно ідеального центрування.

CSS Grid. Двовимірний макет. Частина 2

Продовження: grid-template-areas (named areas), place-items, place-content, place-self, grid-auto-flow, Flexbox vs Grid, class page layout, masonry-сітка та практичні завдання.