Grid

Теперь карточки. В курсе CSS вы расставляли карточки по сетке с помощью display: grid и grid-template-columns. В Tailwind сетка включается классом grid, а столбцы задаются классами grid-cols-*:

.grid {
	display: grid;
}

.grid-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

Число в классе — это число столбцов: grid-cols-3 делает три, grid-cols-4 — четыре, и так далее; подойдёт любое число. Столбцы всегда одной ширины. Каждый получает одну долю пространства (1fr, как вы знаете), а minmax(0, 1fr) означает, что столбец может стать уже своего содержимого: длинное слово в одной карточке не сделает свой столбец шире остальных.

Промежутки между строками и столбцами задают те же классы, что и во flexbox: gap-*, а по отдельности — gap-x-* и gap-y-*.

Нужны столбцы разной ширины? Запишите их в квадратных скобках, как произвольные значения, которые вы знаете (w-[350px]), с подчёркиванием вместо каждого пробела: grid-cols-[12rem_1fr] делает один столбец шириной 12rem, а второй занимает всё остальное.