CSS Grid шпаргалка українською

CSS Grid — найпотужніший інструмент верстки, який існував у CSS. Двовимірні сітки, складні layouts, responsive галереї без жодного @media — все це Grid.

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

Коли використовувати Grid?

Просте правило: дві мірки одночасно (рядки + колонки) — це Grid. Один напрямок — це Flexbox.

Властивості контейнера

.container {
  display: grid; /* або inline-grid */
}

fr — дробові одиниці

fr одиниці — як ділиться простір

fr (fraction) — це частка вільного простору. grid-template-columns: 1fr 2fr 1fr означає: перша і третя колонки заберуть по 1 частині, друга — 2 частини. Якщо є фіксована колонка, fr ділять те, що залишилось: 200px 1fr 1fr — 200px відняли, решту поділили навпіл.

repeat() та minmax()

repeat та minmax — візуалізація

/* 12 однакових колонок */
grid-template-columns: repeat(12, 1fr);

/* Колонки мінімум 200px, але можуть рости */
grid-template-columns: repeat(3, minmax(200px, 1fr));

minmax(min, max) — задає діапазон розміру треку. minmax(200px, 1fr) означає «не менше 200px, але якщо є місце — рости».

auto-fit vs auto-fill

auto-fit vs auto-fill — різниця

/* Responsive галерея без media queries */
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

• auto-fit — розтягує наявні картки, щоб заповнити всю ширину. Порожнього місця немає.
• auto-fill — створює «невидимі» порожні треки. Наявні картки залишаються свого мінімального розміру, а простір зайвий.

99% часу хочеться auto-fit. Це найважливіший трюк CSS Grid — повністю responsive галерея в один рядок, без жодного @media.

justify-items / align-items — вирівнювання в комірці

justify-items та align-items в Grid

За замовчуванням елементи розтягуються на всю комірку (stretch). Якщо хочеш центрувати — постав place-items: center на контейнер.

grid-auto-flow — напрямок заповнення

grid-auto-flow — row, column, dense

Властивості елементів

grid-column / grid-row — об'єднання комірок

grid-column та grid-row span

.featured {
  grid-column: 1 / 3;  /* від 1-ї до 3-ї лінії — займає 2 колонки */
  grid-row: span 2;    /* розтягується на 2 рядки */
}

span 2 — зручніший спосіб сказати «займи 2 треки», не рахуючи лінії вручну.

grid-template-areas — іменовані ділянки

grid-template-areas — візуалізація

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
}

.layout > header  { grid-area: header; }
.layout > nav     { grid-area: sidebar; }
.layout > main    { grid-area: main; }
.layout > footer  { grid-area: footer; }

Це найчитабельніший спосіб задати layout сторінки. Все видно прямо в CSS — як ASCII-арт.

Готові рецепти

Responsive галерея карток (без media queries)

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

Один з найкорисніших патернів у всьому CSS. На широких екранах буде 4 колонки, на планшетах — 2-3, на телефонах — 1. Без жодного @media.

Holy grail layout (header / sidebar / main / aside / footer)

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  grid-template-areas:
    "header  header header"
    "sidebar main   aside"
    "footer  footer footer";
}

Класичний layout, який раніше робили місяцями з float. Тепер — 8 рядків CSS.

12-колонкова сітка (як у Bootstrap)

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }

12 — магічне число, бо ділиться на 1, 2, 3, 4, 6 і 12. Тому будь-яка комбінація колонок виглядає рівномірно.

Sidebar + контент

.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 2rem;
}

Найчастіший паттерн dashboard'ів і документації. 250px фіксованих, решту забере контент.

Накладання елементів (стопка)

.stack {
  display: grid;
  place-items: center;
}

.stack > * {
  grid-area: 1 / 1; /* всі елементи в тій самій комірці */
}

Корисно для текста на картинці, кнопки поверх відео тощо. Замість position: absolute — простіший і responsive-варіант.

Дашборд з різнорозмірними картками

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 1rem;
}

.card-large { grid-column: span 2; grid-row: span 2; }
.card-wide  { grid-column: span 2; }
.card-tall  { grid-row: span 2; }

Картки різних розмірів автоматично укладаються — перфектно для аналітичних дашбордів.

Часті помилки

• fr не працює як очікується? fr ділить залишок простору. Якщо в контейнері є фіксовані колонки чи gap — спочатку віднімаються вони, а потім fr ділять залишок.
• Картки в auto-fit стискаються до 0? Заміни 1fr на minmax(280px, 1fr) — інакше колонки можуть стискатися до нуля.
• grid-template-areas лається на синтаксис? Кожен рядок — рядок таблиці в лапках. Усі рядки повинні мати однакову кількість «слів». Порожня комірка позначається . (крапка).
• Елементи не центруються? За замовчуванням grid-елементи розтягуються на всю комірку (stretch). Постав place-items: center на контейнер або place-self: center на елемент.
• Сітка ламається на мобільному? Замість фіксованих grid-template-columns: 200px 1fr 200px зроби repeat(auto-fit, minmax(...)) або додай media query на ширину < 768px.