Как сделать адаптивную сетку карточек
Короткий ответ
auto-fill и minmax() подбирают число колонок сами:
<style>
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.cards div { padding: 20px 12px; background: lavender; border-radius: 12px; text-align: center; }
</style>
<div class="cards">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>Как это работает
Каждая карточка не уже 130 пикселей. В строку помещается столько карточек, сколько влезает, а оставшееся место делится между ними поровну. Сузьте окно браузера — колонок станет меньше, и ни одного медиазапроса не понадобится.
auto-fill или auto-fit
Разница видна, когда карточек меньше, чем помещается. auto-fill оставляет пустые колонки, а auto-fit схлопывает их, и карточки растягиваются на всю ширину:
<style>
.g { display: grid; gap: 8px; margin-bottom: 8px; }
.g div { padding: 10px; background: honeydew; }
</style>
<div class="g" style="grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));"><div>fill</div><div>fill</div></div>
<div class="g" style="grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));"><div>fit</div><div>fit</div></div>Частая ошибка
На экране уже минимальной ширины карточки сетка вылезает вбок: колонка не может стать уже 130px. Защититесь функцией min() — minmax(min(130px, 100%), 1fr) — тогда на совсем узком экране карточка займёт всю ширину.
Функции из этого ответа
- grid-template-columns — Количество и ширина колонок сетки.
- repeat() — Повторяет дорожки сетки, чтобы не выписывать их по одной.
- minmax() — Размер дорожки сетки между минимумом и максимумом.
- gap — Промежутки между элементами во flexbox и grid.