CSS Grid: строки и колонки
Как собрать адаптивную сетку карточек с repeat, minmax и единицами fr.
Как это работает
Grid управляет строками и колонками одновременно. Контейнер получает display: grid, а его прямые потомки становятся элементами сетки. Для типичного каталога достаточно описать шаблон колонок и расстояния между ними.
Единица fr делит доступное пространство после учёта промежутков и других размеров. Функция minmax задаёт пределы трека. Для адаптивного каталога сочетание auto-fit и minmax позволяет менять количество колонок без отдельного правила для каждой ширины.
Пример в интерфейсе
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 12px; }
.grid > div { padding: 22px; background: #eaf4ee; border-radius: 8px; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| grid-template-columns | Схема колонок. |
| repeat(3, 1fr) | Три равные доли доступного места. |
| minmax(0, 1fr) | Гибкая колонка, которая может сжиматься. |
| gap | Расстояние между треками. |
На что обратить внимание
Длинный текст способен растянуть колонку с минимальным размером auto. Используйте minmax(0, 1fr) или подходящее правило переноса там, где это необходимо.
Проверьте на практике
Добавьте ещё две карточки. Измените ширину контейнера и убедитесь, что новые строки появляются без ручного позиционирования.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.