Grid: сетки в две измерения

Осваиваем Grid — раскладку для настоящих двумерных сеток: строк и столбцов одновременно.

CSS Grid — режим раскладки, который делит контейнер на строки и столбцы и расставляет элементы по получившимся ячейкам.

Grid против Flexbox

Flexbox работает вдоль одной оси: ряд или колонка. Grid работает в двух измерениях сразу — вы задаёте и столбцы, и строки. Грубое правило: ряд кнопок или меню — Flexbox; полноценный макет страницы или галерея с ровными рядами и столбцами — Grid. Они не конкуренты, а инструменты для разных задач.

Создаём сетку

Контейнер становится сеткой через display: grid, а столбцы задаёт grid-template-columns.

<div class="grid">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
</div>

.grid {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  gap: 16px;
}

Получится сетка из трёх столбцов по 200px. Шесть элементов автоматически займут две строки по три. gap работает так же, как во Flexbox, — задаёт промежутки между ячейками.

Единица fr — доли свободного места

Жёсткие пиксели не гибкие. Специальная единица Grid — fr (fraction, «доля») — делит доступную ширину пропорционально.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* три равных столбца */
}

Три столбца поделят всю ширину поровну и будут тянуться вместе с экраном. Доли можно смешивать: 2fr 1fr даст столбцы в пропорции 2:1.

.layout {
  display: grid;
  grid-template-columns: 1fr 3fr; /* узкий сайдбар + широкий контент */
}

repeat — короче для повторов

Писать 1fr 1fr 1fr 1fr утомительно. Функция repeat повторяет шаблон:

.grid {
  grid-template-columns: repeat(4, 1fr); /* четыре равных столбца */
}

Адаптивная сетка без медиазапросов

Связка repeat + auto-fill + minmax делает галерею, которая сама подбирает число столбцов под ширину экрана:

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

Читается так: «делай столько столбцов, сколько влезет; каждый не уже 200px, но может растягиваться до равной доли». На широком мониторе — пять столбцов, на планшете — три, на телефоне — один. И всё это без единого медиазапроса.

Растянуть элемент на несколько ячеек

Отдельная ячейка может занимать несколько столбцов или строк через grid-column / grid-row со словом span:

.featured {
  grid-column: span 2; /* занять два столбца */
}

Так выделяют главный элемент — например, крупную карточку среди обычных.

Строки

Высоту строк задают по аналогии — свойством grid-template-rows. Но чаще строки оставляют на автоподбор: они растут под содержимое сами.

Итог

Grid — двумерная раскладка: задаёте столбцы (grid-template-columns) и строки.
Единица fr делит свободное место долями; repeat() сокращает повторы.
repeat(auto-fill, minmax(200px, 1fr)) — адаптивная сетка без медиазапросов.