Grid
CSS Grid раскладывает элементы по строкам и колонкам одновременно. В Tailwind сетку из трёх равных колонок описывает одна пара классов grid grid-cols-3 — без grid-template-columns и repeat().
Колонки
grid включает сетку, grid-cols- задаёт число равных колонок, gap- — промежутки:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="grid grid-cols-3 gap-4">
<div class="rounded bg-indigo-100 p-4">1</div>
<div class="rounded bg-indigo-100 p-4">2</div>
<div class="rounded bg-indigo-100 p-4">3</div>
<div class="rounded bg-indigo-100 p-4">4</div>
<div class="rounded bg-indigo-100 p-4">5</div>
</div>Пять блоков встали в три колонки: третий элемент закончил первую строку, остальные перешли во вторую. Класс grid-cols-3 превращается в grid-template-columns: repeat(3, minmax(0, 1fr)).
Каталог товаров
Сетка — естественный выбор для списка карточек. Каждая карточка занимает одну ячейку:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="grid grid-cols-3 gap-4 bg-gray-100 p-4">
<div class="overflow-hidden rounded-lg bg-white shadow">
<img src="/media/photo-400x250.jpg" alt="Наушники" class="h-24 w-full object-cover">
<p class="p-3 text-sm font-semibold">Наушники — $79</p>
</div>
<div class="overflow-hidden rounded-lg bg-white shadow">
<img src="/media/photo-400x250.jpg" alt="Колонка" class="h-24 w-full object-cover">
<p class="p-3 text-sm font-semibold">Колонка — $45</p>
</div>
<div class="overflow-hidden rounded-lg bg-white shadow">
<img src="/media/photo-400x250.jpg" alt="Зарядка" class="h-24 w-full object-cover">
<p class="p-3 text-sm font-semibold">Зарядка — $19</p>
</div>
</div>Все карточки одинаковой ширины, а промежутки ровные. На узком экране три колонки тесноваты — в следующем уроке их число будет меняться с шириной.
Растягивание ячейки
col-span- растягивает элемент на несколько колонок, row-span- — на несколько строк. Так выделяют главный товар или широкую шапку:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="grid grid-cols-4 gap-3">
<div class="col-span-2 row-span-2 rounded bg-amber-200 p-4">Товар дня</div>
<div class="rounded bg-gray-100 p-4">A</div>
<div class="rounded bg-gray-100 p-4">B</div>
<div class="rounded bg-gray-100 p-4">C</div>
<div class="rounded bg-gray-100 p-4">D</div>
<div class="col-span-full rounded bg-indigo-100 p-4">Вся строка</div>
</div>Жёлтый блок занял квадрат 2 на 2, а col-span-full растянул последний на всю ширину.
Колонки разной ширины
Для боковой панели и основного содержимого колонкам задают размер в квадратных скобках — подчёркивание заменяет пробел: grid-cols-[240px_1fr]. Подробнее о таких значениях — в уроке о произвольных значениях.
Частая ошибка
Указать col-span-2 элементу, родитель которого не сетка:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="flex gap-3">
<div class="col-span-2 bg-amber-200 p-4">Широкий?</div>
<div class="bg-gray-100 p-4">B</div>
</div>Блок не стал шире: col-span- действует только внутри grid. Во flex-контейнере ширину элемента меняют через flex-1 или w-.