Урок 27. Теория: Строки, колонки и grid-template

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

⚡ Кратко

В этом уроке учимся точно управлять треками сетки — строками и колонками.

  • grid-template-columns / grid-template-rows — задают список треков (ширины колонок и высоты строк).
  • fr — доля свободного места; 1fr 1fr 1fr = три равные колонки.
  • repeat(3, 1fr) — короткая запись повторяющихся треков.
  • minmax(150px, 1fr) — трек не уже 150px, но тянется до 1fr.
  • repeat(auto-fit, minmax(200px, 1fr)) — адаптивная сетка без media queries.
  • grid-column: span 2 / grid-row: span 2 — ячейка занимает несколько треков.
  • gap — зазор между треками (не путать с margin).

Главная идея

В уроке 26 мы включили display: grid и получили сетку. Теперь учимся проектировать сами треки — то есть точно говорить браузеру, сколько колонок и строк нужно и какой они ширины. Ключевая мысль Grid: сначала вы чертите сетку линий на контейнере, а уже потом раскладываете по ней элементы. Линии нумеруются автоматически: при трёх колонках появляются вертикальные линии 1, 2, 3, 4. Пространство между двумя соседними линиями называется треком (track) — это и есть колонка или строка.

Представь разметку парковки. Сначала рабочие красят на асфальте линии — это и есть grid-линии. Промежуток между двумя линиями — машино-место (трек). Обычная машина занимает одно место (span 1), а грузовик — сразу два соседних (span 2). Ты не двигаешь сами машины вручную — ты задаёшь разметку, и каждая машина «встаёт» в свои места по номерам линий. fr — это как «поделить всю площадку поровну между местами», а minmax(150px, 1fr) — «место не уже 150px, но если площадка большая, пусть растягивается».

Линии и треки наглядно

Сетка из трёх колонок и двух строк имеет 4 вертикальных линии и 3 горизонтальных. По этим номерам линий и размещаются элементы.

1 2 3 4 1 2 3 grid-column: 1 / 3 (span 2)
Вертикальные линии (1–4) ограничивают колонки, горизонтальные (1–3) — строки. Фиолетовая ячейка занимает два трека от линии 1 до линии 3.

Как работают единицы и функции

fr (fraction) делит свободное место поровну. grid-template-columns: 1fr 1fr 1fr — три одинаковые колонки. 2fr 1fr — первая вдвое шире второй. Фиксированные размеры (например, 200px) вычитаются из контейнера первыми, а fr делит остаток.

repeat(n, ...) — синтаксический сахар: repeat(3, 1fr) = 1fr 1fr 1fr. Удобно при большом числе одинаковых треков.

minmax(min, max) задаёт диапазон размера трека: не меньше min, не больше max. minmax(150px, 1fr) = «никогда не уже 150px, но если есть место — тянись».

Адаптивная сетка без media queries

Самый мощный приём урока — repeat(auto-fit, minmax(200px, 1fr)). Браузер сам подбирает, сколько колонок шириной от 200px поместится в текущую ширину контейнера, и переносит карточки на новые строки при сужении окна — без единого @media.

/* styles.css */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
auto-fit vs auto-fill: auto-fit «схлопывает» пустые треки и растягивает существующие карточки на всю ширину; auto-fill оставляет пустые треки-резервы (карточки не растягиваются). Для галерей чаще берут auto-fit.

Размещение по линиям и span

Чтобы ячейка заняла несколько треков, указывают линии явно или используют span:

/* styles.css */
.card--wide { grid-column: span 2; }   /* две колонки в ширину */
.card--tall { grid-row: span 2; }      /* две строки в высоту  */
.hero       { grid-column: 1 / 3; }    /* от линии 1 до линии 3 */

Когда применять

Grid с явными треками — для двумерных раскладок: галереи карточек, дашборды, страницы с шапкой, сайдбаром и контентом. Для одномерного ряда (кнопки, теги в строку) проще Flexbox.

Частая ошибка: писать repeat(auto-fit, 1fr) без minmax() — так браузер не знает минимальной ширины и не сможет «решить», сколько колонок уместить. Всегда сочетай auto-fit/auto-fill с minmax().

Навигация