Урок 30 · CSS

auto-fit заполняет ряд без медиазапроса

Одинаковые карточки не обязаны ждать отдельного правила на каждый размер экрана.

Почему это следующий шаг

Подвал и шапка стоят на своих местах. Ряд карточек всё ещё ломается, если колонок задано фиксированное число.

Как сделать

Сетка repeat(auto-fit, minmax(220px, 1fr)) ставит столько колонок, сколько влезает. Минимальная ширина карточки 220 пикселей, остаток делится поровну. gap задаёт промежуток и по вертикали, и по горизонтали. Не смешивай это с фиксированным grid-template-columns: 1fr 1fr 1fr на узком экране.

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

Что проверить

• На широком экране карточек в ряд несколько.
• На узком остаётся одна колонка без горизонтальной прокрутки.
• Промежуток одинаковый между рядами и колонками.