8. Grid с Tailwind

Tailwind CSS: Grid

CSS Grid — инструмент для создания двумерных сеток. В Tailwind работа с Grid такая же интуитивная, как и всё остальное — через утилиты.

Базовые классы Grid

<!-- Включаем Grid -->
<div class="grid">...</div>
<div class="inline-grid">...</div>

<!-- Количество колонок -->
<div class="grid grid-cols-1">1 колонка</div>
<div class="grid grid-cols-2">2 колонки</div>
<div class="grid grid-cols-3">3 колонки</div>
<div class="grid grid-cols-4">4 колонки</div>
<div class="grid grid-cols-6">6 колонок</div>
<div class="grid grid-cols-12">12 колонок</div>

<!-- Строки -->
<div class="grid grid-rows-3">3 строки одинаковой высоты</div>

Gap (расстояние между ячейками)

<div class="grid grid-cols-3 gap-4">4 — gap: 16px</div>
<div class="grid grid-cols-3 gap-6">6 — gap: 24px</div>
<div class="grid grid-cols-3 gap-x-6 gap-y-4">Разные по осям</div>

Col Span (объединение колонок)

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2">Занимает 2 колонки</div>
  <div>Занимает 1</div>
  <div>1</div>
  <div class="col-span-2">Снова 2</div>
</div>

<!-- Полная ширина -->
<div class="grid grid-cols-4 gap-4">
  <div class="col-span-full">На всю ширину</div>
  <div>1/4</div>
  <div>1/4</div>
  <div>1/4</div>
  <div>1/4</div>
</div>

<!-- Row Span -->
<div class="grid grid-cols-3 grid-rows-2 gap-4">
  <div class="row-span-2">Занимает 2 строки по высоте</div>
  <div>Ячейка</div>
  <div>Ячейка</div>
  <div>Ячейка</div>
  <div>Ячейка</div>
</div>

Позиционирование ячеек

<div class="grid grid-cols-4 gap-4">
  <!-- col-start и col-end -->
  <div class="col-start-2 col-end-4">Начинается со 2-й линии, заканчивается на 4-й</div>
</div>

Auto Columns / Auto Rows

<!-- Автоматические колонки: минимум 200px, максимум 1fr -->
<div class="grid gap-4" style="grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))">
  <div>Авто-ширина</div>
  <div>Авто-ширина</div>
  <div>Авто-ширина</div>
</div>

<!-- Для этого в Tailwind v3 нужен arbitrary value -->
<div class="grid gap-4 grid-cols-[repeat(auto-fill,minmax(200px,1fr))]">
  ...
</div>

Выравнивание в Grid

<!-- Горизонтальное выравнивание ячеек -->
<div class="grid grid-cols-3 justify-items-start">...</div>
<div class="grid grid-cols-3 justify-items-center">...</div>
<div class="grid grid-cols-3 justify-items-end">...</div>

<!-- Вертикальное выравнивание -->
<div class="grid grid-cols-3 h-32 items-start">...</div>
<div class="grid grid-cols-3 h-32 items-center">...</div>
<div class="grid grid-cols-3 h-32 items-end">...</div>

<!-- Выравнивание всей сетки -->
<div class="grid grid-cols-3 h-96 content-center">...</div>

Реальный паттерн: Responsive Card Grid

<!-- 1 колонка на мобильных, 2 на планшете, 3 на десктопе -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white rounded-xl p-6 shadow">Карточка 1</div>
  <div class="bg-white rounded-xl p-6 shadow">Карточка 2</div>
  <div class="bg-white rounded-xl p-6 shadow">Карточка 3</div>
</div>

Паттерн: Bento Grid (популярный в 2024-2025)

<div class="grid grid-cols-3 grid-rows-2 gap-4 h-96">
  <!-- Большой блок слева -->
  <div class="col-span-2 row-span-2 bg-blue-500 rounded-2xl">Главный</div>
  <!-- Маленькие блоки справа -->
  <div class="bg-purple-400 rounded-2xl">Маленький 1</div>
  <div class="bg-pink-400 rounded-2xl">Маленький 2</div>
</div>

Практика