Grid: сетки из колонок

Строим аккуратные двумерные сетки: равные колонки, объединение ячеек и зазоры.

Grid создаёт сетку из заданного числа колонок, в которую элементы раскладываются автоматически.

Колонки: grid-cols

Включаем сетку классом grid и задаём число колонок через grid-cols-*:

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Элементы лягут в три равные колонки с зазором 16px между ячейками. Четвёртый блок перенесётся на новую строку под первым. Все колонки получают одинаковую ширину автоматически — вручную её считать не нужно.

gap — зазоры в сетке

В Grid тот же gap-* задаёт расстояние сразу и между колонками, и между строками. Можно раздельно: gap-x-* по горизонтали, gap-y-* по вертикали.

Объединение колонок: col-span

col-span-* заставляет ячейку занять несколько колонок. Например, в сетке из 3 колонок сделаем первый блок шире:

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2">Широкий блок</div>
  <div>Узкий</div>
</div>

Первый блок займёт две колонки из трёх, второй — оставшуюся одну. Так делают, например, основную колонку статьи и боковую панель.

Адаптивная сетка карточек

Сила Grid раскрывается с брейкпоинтами: одна колонка на телефоне, две на планшете, три на десктопе. Это самая частая «галерея карточек»:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div>Карточка</div>
  <div>Карточка</div>
  <div>Карточка</div>
</div>

На узком экране карточки идут в один столбец, на среднем — по две в ряд, на широком — по три. Префиксы md: и lg: подробно разберём в следующем разделе.

Flex или Grid — что выбрать

Итог

• grid + grid-cols-N создаёт сетку из N равных колонок.
• gap-* задаёт зазоры; col-span-* объединяет колонки.
• Связка grid-cols-1 md:grid-cols-2 lg:grid-cols-3 — стандартная адаптивная галерея карточек.