🖼️ Сетка карточек

Адаптивные сетки и галереи

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

Базовый рецепт: grid-cols-1 sm:grid-cols-2 lg:grid-cols-3.

Карточка 1

Одна колонка на мобильном, три на десктопе.

Карточка 2

Промежутки задаёт gap у контейнера.

Карточка 3

Высоты выравниваются автоматически.

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
  <article class="rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900">
    <div class="h-24 rounded-lg bg-slate-100 dark:bg-slate-800"></div>
    <h3 class="mt-3 text-sm font-semibold text-slate-900 dark:text-slate-50">Карточка 1</h3>
    <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Одна колонка на мобильном, три на десктопе.</p>
  </article>
  <article class="rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900">
    <div class="h-24 rounded-lg bg-slate-100 dark:bg-slate-800"></div>
    <h3 class="mt-3 text-sm font-semibold text-slate-900 dark:text-slate-50">Карточка 2</h3>
    <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Промежутки задаёт gap у контейнера.</p>
  </article>
  <article class="rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900">
    <div class="h-24 rounded-lg bg-slate-100 dark:bg-slate-800"></div>
    <h3 class="mt-3 text-sm font-semibold text-slate-900 dark:text-slate-50">Карточка 3</h3>
    <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Высоты выравниваются автоматически.</p>
  </article>
</div>

Сетка без брейкпоинтов

Число колонок подбирается по ширине контейнера — работает и внутри узкого сайдбара.

Авто 1

Авто 2

Авто 3

Авто 4

<div class="grid gap-4 grid-cols-[repeat(auto-fit,minmax(200px,1fr))]">
  <div class="rounded-lg border border-slate-200 bg-white p-4 text-sm text-slate-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300">Авто 1</div>
  <div class="rounded-lg border border-slate-200 bg-white p-4 text-sm text-slate-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300">Авто 2</div>
  <div class="rounded-lg border border-slate-200 bg-white p-4 text-sm text-slate-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300">Авто 3</div>
  <div class="rounded-lg border border-slate-200 bg-white p-4 text-sm text-slate-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300">Авто 4</div>
</div>

Галерея с крупным элементом

col-span-2 row-span-2 делает первый элемент вчетверо крупнее.

Главное фото

<div class="grid grid-cols-4 gap-3">
  <div class="col-span-2 row-span-2 rounded-lg bg-linear-to-br from-sky-400 to-indigo-500 p-4 text-sm text-white">Главное фото</div>
  <div class="aspect-square rounded-lg bg-slate-200 dark:bg-slate-800"></div>
  <div class="aspect-square rounded-lg bg-slate-200 dark:bg-slate-800"></div>
  <div class="aspect-square rounded-lg bg-slate-200 dark:bg-slate-800"></div>
  <div class="aspect-square rounded-lg bg-slate-200 dark:bg-slate-800"></div>
</div>

Карточки одинаковой высоты с кнопкой внизу

Карточка — flex flex-col, кнопка — mt-auto: все кнопки на одной линии.

Короткая

Одна строка.

Длинная

Описание в несколько строк, которое делает карточку выше соседних.

Средняя

Описание в две строки текста.

<div class="grid gap-4 sm:grid-cols-3">
  <div class="flex flex-col rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900">
    <h3 class="text-sm font-semibold text-slate-900 dark:text-slate-50">Короткая</h3>
    <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Одна строка.</p>
    <button class="mt-auto pt-4"><span class="block rounded-md bg-slate-900 px-3 py-2 text-sm text-white dark:bg-slate-100 dark:text-slate-900">Выбрать</span></button>
  </div>
  <div class="flex flex-col rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900">
    <h3 class="text-sm font-semibold text-slate-900 dark:text-slate-50">Длинная</h3>
    <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Описание в несколько строк, которое делает карточку выше соседних.</p>
    <button class="mt-auto pt-4"><span class="block rounded-md bg-slate-900 px-3 py-2 text-sm text-white dark:bg-slate-100 dark:text-slate-900">Выбрать</span></button>
  </div>
  <div class="flex flex-col rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900">
    <h3 class="text-sm font-semibold text-slate-900 dark:text-slate-50">Средняя</h3>
    <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Описание в две строки текста.</p>
    <button class="mt-auto pt-4"><span class="block rounded-md bg-slate-900 px-3 py-2 text-sm text-white dark:bg-slate-100 dark:text-slate-900">Выбрать</span></button>
  </div>
</div>

Разбор

Класс	Зачем
`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3`	адаптивное число колонок
`gap-4`	одинаковые промежутки по обеим осям
`grid-cols-[repeat(auto-fit,minmax(200px,1fr))]`	колонки подбираются автоматически
`col-span-2 row-span-2`	крупный элемент в сетке
`aspect-square`	одинаковые пропорции плиток
`auto-rows-fr`	строки равной высоты
`flex flex-col` + `mt-auto`	кнопка прижата к низу карточки

Частые ошибки

Сетка без мобильного варианта: три колонки по 80px на телефоне.
Отступы у элементов вместо gap — появляются лишние поля по краям.
Длинный текст «распирает» колонку: нужен min-w-0 или break-words.
Фиксированные ширины колонок вместо 1fr.
Заголовок внутри сетки занимает одну ячейку — нужен col-span-full.