← Все вопросы
Как сделать сетку карточек, чтобы они переносились на новую строку?
11
Хочу галерею карточек: по 3-4 в ряд на широком экране, а на узком — меньше, с автопереносом. Что лучше взять — flexbox с переносом или grid?
3 ответа
22
Зависит от задачи. Если карточки должны просто «течь» и переноситься — flexbox с flex-wrap: wrap. Если нужна именно ровная сетка с одинаковыми колонками — grid, он для этого и придуман.
Флекс:
.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1 1 250px; /* растёт, ужимается, базовая ширина 250px */
}
Грид с авто-количеством колонок (мой любимый приём):
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
}
Грид сам посчитает, сколько карточек влезет в ряд, и перенесёт остальные. Без всяких media queries.
Владимир Елисеев auto-fit vs auto-fill — auto-fit растягивает последние карточки на всю ширину, auto-fill оставляет пустые колонки · 14 месяцев назад
Владимир Григорьев +1 за minmax, спас мне кучу медиа-запросов · 14 месяцев назад
6
Для сетки карточек я почти всегда беру grid с repeat(auto-fill, minmax(...)) — меньше возни, чем с флексом.
3
flex-wrap: wrap.
Ваш ответ
Войдите, чтобы ответить на вопрос.
