Урок 26. Теория: Введение в CSS Grid

📁 Раздел: CSS Grid ⏱️ Время изучения: ~60 мин 🎯 Сложность: Средняя
#display #grid-template-columns #grid-template-rows #gap

⚡ Кратко

CSS Grid превращает контейнер в двумерную сетку — строки и колонки одновременно. Включается одной строкой: display: grid.

  • grid-template-columns задаёт ширины колонок, grid-template-rows — высоты строк.
  • Единица fr — «доля» свободного места: 1fr 1fr 1fr = три равные колонки.
  • repeat(3, 1fr) — короткая запись для трёх одинаковых колонок.
  • gap — расстояние между ячейками (без margin-хаков).
  • Flexbox раскладывает в одну линию (1D), Grid — сразу в строки и колонки (2D).

Главная идея

CSS Grid делает контейнер двумерной сеткой: ты заранее проектируешь строки и колонки, а потом элементы сами раскладываются по ячейкам. В отличие от Flexbox, который выстраивает элементы вдоль одной оси (либо ряд, либо столбец), Grid управляет обеими осями сразу. Включается это одной строкой — display: grid на родителе. Дальше всё описание сетки живёт на контейнере, а не на каждом ребёнке.

Flexbox — это как расставить книги в один ряд на полке: они выстраиваются по длине, ты лишь решаешь, прижать их влево, по центру или растянуть. Grid — это шахматная доска или таблица в Excel: ты сначала чертишь клетки (столько-то колонок на столько-то строк), а потом раскладываешь фигуры по ячейкам. Поэтому Grid идеален для макета страницы целиком — шапка, боковая колонка, контент, подвал, — а Flexbox для одной ленты элементов.

Как устроена сетка: треки и линии

Сетка состоит из треков (track) — это колонки и строки — и линий (grid line), которые их разделяют. Для трёх колонок всегда четыре вертикальных линии (от 1 до 4): по ним позже можно «прибивать» элементы. Между треками лежит gap — чистый зазор, который не съедает место под фон ячеек.

1 2 3 4 вертикальные линии колонок (1…4) A B
3 колонки × 2 строки: бирюзовые и фиолетовые блоки — ячейки (треки), пунктир — grid-линии, между ними — gap.

Колонки, строки и единица fr

Ширины колонок задаёт grid-template-columns, высоты строк — grid-template-rows. Значения можно смешивать: пиксели для фиксированной колонки, проценты, auto и особую единицу fr (fraction — доля). fr делит оставшееся свободное место поровну между треками: запись 200px 1fr отдаст 200px первой колонке, а вся остальная ширина уйдёт во вторую. Чтобы не писать 1fr 1fr 1fr, есть сокращение repeat(3, 1fr).

📄 lesson-26/grid.css
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* три равные колонки */
  gap: 1rem;                             /* зазор между ячейками */
}

gap вместо отступов

Раньше промежутки между плитками собирали через margin у детей — и постоянно боролись с лишним отступом по краям. В Grid (и Flexbox) есть свойство gap: оно добавляет расстояние только между ячейками, не трогая внешние границы контейнера. Можно задать отдельно row-gap и column-gap или одной строкой gap: 16px 24px (сначала строки, потом колонки).

Когда Grid, а когда Flexbox

Бери Grid, когда нужна структура по двум осям сразу: галерея, карточный каталог, макет страницы (шапка/сайдбар/контент/подвал), любая «таблица из блоков». Бери Flexbox, когда элементы идут в одну линию: панель навигации, ряд кнопок, выравнивание по центру. Они не конкуренты — на реальной странице Grid задаёт крупную раскладку, а Flexbox выравнивает содержимое внутри ячеек.

Запомни: Grid-свойства (grid-template-*, gap) пишутся на контейнере. Если написать их на обычном блоке без display: grid — они просто проигнорируются.
Частая ошибка: ждать переноса элементов «на новую строку» как во Flexbox с flex-wrap. В Grid количество колонок жёстко задано шаблоном — лишние элементы создают новые строки по правилам авто-размещения, а не переносятся внутри одной.

Навигация