Головна » Розробка » Огляд сучасних можливостей CSS: Subgrid — магія вкладених сіток

Огляд сучасних можливостей CSS: Subgrid — магія вкладених сіток

CSS Subgrid

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

Ця стаття — глибокий, але практичний огляд можливості subgrid: що це таке, як воно працює, де і коли його доцільно використовувати, та чому ця фіча справді змінює гру в CSS Layout.

🔍 Що таке subgrid?

subgrid — це нове значення для властивості grid-template-columns або grid-template-rows, яке дозволяє вкладеній сітці успадковувати сіткові лінії від батьківської сітки.

Уявіть, що ви маєте загальну сітку для компонування сторінки, а всередині — компоненти, які також використовують grid. Без subgrid ці внутрішні компоненти не можуть вирівнюватися по лініях зовнішньої сітки. Вони створюють власні незалежні сітки. Але з subgrid — все вирівнюється ідеально.

✨ Навіщо це потрібно?

До появи subgrid, навіть при використанні Grid Layout, розробникам доводилося:

  • вручну повторювати значення колонок/рядків у дочірніх елементах;

  • використовувати хитрі хакі з flexbox або абсолютним позиціонуванням;

  • миритися з візуально «нерівними» компонентами.

З subgrid це все минає: вкладений елемент автоматично приймає структуру від батька і дотримується однакового вирівнювання.

🧪 Синтаксис і приклад

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

.item {
  display: grid;
  grid-template-columns: subgrid;
}

<div class="container">
  <div class="item">
    <div>Колонка 1</div>
    <div>Колонка 2</div>
    <div>Колонка 3</div>
  </div>
</div>

У цьому прикладі .item автоматично прийме ті самі колонки, що й .container, і всі три блоки вирівняються за спільними сітковими лініями.

📏 Subgrid по рядках і колонках

Subgrid можна використовувати окремо для рядків або колонок:

.subgrid-col {
  display: grid;
  grid-template-columns: subgrid;
}

.subgrid-row {
  display: grid;
  grid-template-rows: subgrid;
}

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

✅ Коли використовувати subgrid

🔹 Компоненти зі спільним заголовком

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

.card-list {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

🔹 Форми з вирівняними полями

Subgrid чудово підходить для створення гнучких, але вирівняних форм з однаковим розміщенням полів у декількох секціях.

🔹 Табличні layout-и

Багато таблиць можна реалізувати через Grid + Subgrid, без <table>. Це особливо корисно для адаптивних інтерфейсів.

🧭 Підтримка браузерами

На 2024 рік subgrid підтримується у Firefox, Safari та з недавніх пір — у Chromium. Тобто, якщо ваш проєкт не має критичних вимог до старих браузерів (IE, старі версії Edge), subgrid — вже цілком життєздатне рішення.

Для повної підтримки рекомендується перевіряти актуальні дані на caniuse.com.

🚫 Обмеження та зауваження

  • subgrid не працює з display: contents чи flex.

  • Ви не можете комбінувати subgrid з власними розмірами колонок/рядків в тому ж елементі.

  • Може бути складніше відлагоджувати без хороших devtools (у Chrome підтримка у devtools тільки нещодавно з’явилася).

🧠 Висновок

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

Subgrid — це не просто ще одна фіча, а втілення справжньої досконалості в сучасному CSS. І якщо ви вже користуєтесь Grid — настав час зробити крок далі. Не бійтеся subgrid — це та магія, яку варто приручити. 💡🧙‍♂️