Как на CSS сделать адаптивную сетку карточек товаров, которая меняет количество колонок в зависимости от ширины экрана?

Адаптивная сетка карточек товаров — одна из ключевых задач при вёрстке интернет-магазинов. Существует два основных подхода: CSS Grid и Flexbox. Рассмотрим оба варианта подробно.

## Способ 1: CSS Grid с auto-fill/auto-fit

Самый современный и удобный способ — использование CSS Grid с функцией `repeat()` и ключевыми словами `auto-fill` или `auto-fit`.

css
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}

.card {
background: #fff;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

Здесь `minmax(250px, 1fr)` означает: каждая колонка минимум 250px, максимум — равная доля свободного пространства. Браузер сам вычислит, сколько колонок поместится на экране.

**Разница auto-fill и auto-fit:** `auto-fill` создаёт пустые колонки, если карточек мало; `auto-fit` растягивает существующие карточки на всю ширину.

## Способ 2: CSS Grid с медиазапросами

Если нужен точный контроль над количеством колонок:

css
.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}

/* Планшеты: 2 колонки */
@media (min-width: 600px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}

/* Десктоп: 3 колонки */
@media (min-width: 900px) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}

/* Широкий экран: 4 колонки */
@media (min-width: 1200px) {
.card-grid {
grid-template-columns: repeat(4, 1fr);
}
}

## Способ 3: Flexbox

css
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}

.card {
flex: 1 1 calc(25% — 20px);
min-width: 200px;
max-width: 100%;
}

Флексбокс менее предсказуем при выравнивании последней строки, поэтому для сеток Grid предпочтительнее.

## Контейнер и отступы

Не забудьте ограничить максимальную ширину контейнера:

css
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 16px;
box-sizing: border-box;
}

## Рекомендации

— Используйте `box-sizing: border-box` для всех элементов, чтобы padding не ломал расчёты.
— Для изображений внутри карточек задайте `width: 100%; height: auto; object-fit: cover;`.
— Подход с `auto-fill/auto-fit` избавляет от необходимости писать медиазапросы вручную и является наиболее гибким решением для большинства проектов.
— Тестируйте сетку на реальных устройствах или в DevTools браузера.