Responsive grid карточек

CSS Grid с auto-fill и minmax — сетка карточек автоматически перестраивается под любой экран без media query.

Задача

Нужна сетка карточек (товары, статьи, пользователи), которая показывает 1 колонку на мобильном, 2-3 на планшете и 4+ на десктопе без написания набора media queries.

Решение

<div class="card-grid">
  <article class="card">
    <img class="card__img" src="photo.jpg" alt="Фото" />
    <div class="card__body">
      <h3 class="card__title">Название</h3>
      <p class="card__text">Описание товара или статьи.</p>
      <a class="card__link" href="#">Подробнее</a>
    </div>
  </article>
  <!-- ещё карточки -->
</div>

.card-grid {
  display: grid;
  /* Минимум 280px на колонку, максимум — равные доли */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  padding: 24px;
}

.card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s;
}

.card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.card__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.card__title { font-size: 1.1rem; font-weight: 600; }
.card__text  { color: #64748b; font-size: 0.9rem; flex: 1; }

.card__link {
  align-self: flex-start;
  padding: 6px 14px;
  background: #3b82f6;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.875rem;
  margin-top: auto;
}

Ключевые моменты

  • repeat(auto-fill, minmax(280px, 1fr)) — браузер сам вычисляет количество колонок; media query не нужны.
  • auto-fill vs auto-fit: auto-fill сохраняет пустые колонки, auto-fit растягивает карточки — для карточек обычно предпочтительнее auto-fill.
  • aspect-ratio: 16/9 на изображении + object-fit: cover — все картинки одной высоты независимо от оригинала.
  • flex: 1 на .card__body и margin-top: auto на кнопке — кнопки выровнены по нижнему краю во всех карточках.

Варианты

  • Masonry (Pinterest-стиль): grid-template-rows: masonry — экспериментальный, только Firefox. Для кроссбраузерного — JS-библиотека Masonry или CSS columns.
  • С media query для точного контроля:
    @media (min-width: 640px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(4, 1fr); } }

Связанные рецепты / темы