В прошлой статье мы разобрали flexbox. Он отлично подходит для выравнивания и простых макетов: меню, хедеры, блоки в строку. Но если нужно выстроить настоящую сетку карточек или галерею — удобнее использовать Grid. В Tailwind это делается буквально в пару классов.

Основные утилиты Grid

• grid — превращает контейнер в grid.
• grid-cols-N — задаёт количество колонок (например, grid-cols-3).
• gap-* — отступы между ячейками.
• col-span-N — элемент растягивается на несколько колонок.

Пример 1. Простая сетка

<div class="grid grid-cols-3 gap-4">
  <div class="bg-gray-200 p-4">1</div>
  <div class="bg-gray-200 p-4">2</div>
  <div class="bg-gray-200 p-4">3</div>
</div>

Три колонки и равные отступы между ними. Всё.

Пример 2. Адаптивная сетка

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-gray-100 p-6">Карточка 1</div>
  <div class="bg-gray-100 p-6">Карточка 2</div>
  <div class="bg-gray-100 p-6">Карточка 3</div>
  <div class="bg-gray-100 p-6">Карточка 4</div>
</div>

Здесь сетка перестраивается:

• на мобильных — одна колонка,
• на планшетах — две,
• на десктопах — три.

Отличный вариант для карточек товаров или галерей.

Пример 3. Элемент на несколько колонок

<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-200 p-4 col-span-2">Большой блок</div>
  <div class="bg-gray-200 p-4">Малый</div>
  <div class="bg-gray-200 p-4">Малый</div>
</div>

Первый блок растянулся на две колонки (col-span-2). Полезно для выделения главного контента.

Пример 4. Галерея изображений

<div class="grid grid-cols-2 md:grid-cols-4 gap-2">
  <img src="img1.jpg" class="w-full h-32 object-cover rounded">
  <img src="img2.jpg" class="w-full h-32 object-cover rounded">
  <img src="img3.jpg" class="w-full h-32 object-cover rounded">
  <img src="img4.jpg" class="w-full h-32 object-cover rounded">
</div>

На мобильных 2 колонки, на больших экранах — 4. Класс object-cover гарантирует, что фото не будет искажено.

Когда использовать Grid, а когда Flex

• Flexbox — когда нужно просто выстроить ряд элементов или выровнять их: меню, кнопки, навигация.
• Grid — когда нужна настоящая сетка: карточки, галереи, лендинги с несколькими колонками.

Часто они работают вместе: сетка карточек делается на Grid, а содержимое внутри каждой карточки выравнивается Flex’ом.

Упражнения ✍️

1. Сделай сетку из 4 карточек: на мобильных одна колонка, на sm: — две, на lg: — четыре.
2. Собери сетку с одним большим блоком (col-span-2) и тремя маленькими.
3. Попробуй сделать галерею картинок, которая перестраивается с 2 до 4 колонок.

Итог

Grid в Tailwind включается утилитой grid. Класс grid-cols-* задаёт количество колонок, gap-* отвечает за промежутки, а col-span-* позволяет растягивать элементы. Добавив responsive-классы (sm:, md:, lg:) вы легко сделаете адаптивные сетки для любых задач.

👉 В следующей статье (#8) разберём Container query — новую возможность Tailwind v4, которая позволяет адаптировать компоненты не только к экрану, но и к размеру их контейнера.