CSS Grid: адаптивная сетка карточек

Категория: CSS · Язык: CSS · Обновлено:

Адаптивную сетку карточек в CSS Grid можно собрать без media query: repeat(auto-fit, minmax(220px, 1fr)) размещает столько колонок, сколько помещается, и растягивает их на доступную ширину. Задайте минимальный размер карточки под свой контент.

Сетка с адаптивным числом колонок

CSS
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.card {
  min-width: 0;
  padding: 1rem;
  border: 1px solid #d7dce2;
  border-radius: 0.75rem;
}
HTML
<div class="cards">
  <article class="card">Карточка 1</article>
  <article class="card">Карточка 2</article>
  <article class="card">Карточка 3</article>
</div>

auto-fit схлопывает пустые дорожки и позволяет карточкам занять свободное место. Если нужно сохранять пустые колонки сетки, используйте auto-fill.

Значение

Когда удобно

auto-fit

Колонки растягиваются, когда карточек мало

auto-fill

Размеры сетки остаются стабильными при пустых ячейках

minmax(220px, 1fr)

Ячейка не уже 220 px и может расширяться

На узком экране проверьте, что минимальная ширина карточки не создаёт горизонтальную прокрутку. Для изображений задайте max-width: 100%.

Как задать ровно три колонки?

Используйте grid-template-columns: repeat(3, minmax(0, 1fr)). Для адаптивного числа колонок удобнее auto-fit с minmax().

Что делать с длинным текстом?

Добавьте min-width: 0 элементу сетки и отдельно задайте переносы или обрезку для конкретного текстового блока.