Адаптивную сетку карточек можно собрать без медиазапросов: задайте контейнеру CSS Grid и используйте `grid-template-columns: repeat(auto-fit, minmax(минимальная_ширина, 1fr))`. Браузер разместит столько колонок, сколько помещается, и расширит карточки, если свободного места больше. Минимальную ширину выбирайте по содержимому, чтобы карточки оставались читаемыми.
Что важно учесть в адаптивной сетке на Grid
- `minmax()` задаёт минимальную ширину колонки и позволяет ей расти.
- `auto-fit` размещает карточки в доступных колонках и схлопывает незаполненные.
- Ширина карточки и промежутки между ними влияют на число колонок.
- Сетку настраивают отдельно от оформления карточек: цвета, рамки и тени не определяют число колонок.
- Проверяйте поведение на узком контейнере, а не только на широком экране.
Как задать колонки через repeat(), auto-fit и minmax()
Такой подход подходит для каталогов, галерей и блоков с материалами, когда число карточек меняется, а колонки должны подстраиваться под ширину контейнера. Он не всегда уместен, если на определённой ширине нужен строго заданный макет или разные размеры колонок: тогда удобнее явно описать сетку или добавить медиазапросы.
Минимальный рабочий пример:
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 1rem;
}
.card {
padding: 1rem;
border: 1px solid #ddd;
border-radius: 0.5rem;
}Здесь `repeat()` повторяет шаблон колонок, `auto-fit` выбирает их количество, а `minmax(15rem, 1fr)` не даёт колонке стать уже 15rem и разрешает ей занять доступную долю пространства. Это базовый способ сделать CSS Grid адаптивная сетка карточек без фиксированного числа колонок.
Как подобрать минимальную ширину карточки
Для настройки достаточно редактора кода и браузера с инструментами разработчика. Не нужны дополнительные библиотеки или специальные доступы; правьте CSS в проекте либо временно проверяйте значения в панели стилей браузера.
Подбирайте минимум по содержимому, а не по условному числу колонок:
- учтите длину заголовков, подписи, кнопки и внутренние отступы;
- проверьте, помещается ли текст без нежелательных переносов и горизонтальной прокрутки;
- начните с удобной ширины карточки, затем уменьшайте её, наблюдая за самым узким подходящим экраном.
Например, `15rem` в примере - стартовое значение, а не универсальная норма. Если содержимое требует большего пространства, увеличьте минимум; если карточки остаются удобными при меньшей ширине, его можно уменьшить. Так работает настройка CSS Grid minmax auto-fit.
Почему auto-fit убирает пустые колонки
Чтобы понять, как сделать адаптивную сетку на CSS Grid, настройте контейнер, задайте минимальную ширину колонки и проверьте, как меняется число карточек при изменении ширины.
-
Сделайте родительский элемент Grid-контейнером.
Добавьте `display: grid` элементу, который непосредственно содержит карточки. Если правило назначено вложенной обёртке без карточек внутри, сетка не применится к нужным элементам. -
Задайте повторяемый шаблон колонок.
Используйте `repeat(auto-fit, minmax(15rem, 1fr))`. Минимальная ширина ограничивает сжатие колонки, а `1fr` распределяет между колонками свободное место. -
Проверьте сетку на разной ширине контейнера.
Уменьшайте ширину окна или родительского блока. Когда следующая колонка уже не помещается с учётом промежутков, карточки переносятся на следующий ряд. -
Сравните поведение с auto-fill.
Поменяйте `auto-fit` на `auto-fill`: браузер будет сохранять места для потенциальных колонок, даже если карточек не хватает. С `auto-fit` незаполненные колонки схлопываются, а оставшиеся карточки могут расшириться.
В режиме быстрого старта достаточно выполнить эти действия:
- Назначьте контейнеру `display: grid`.
- Добавьте `grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr))`.
- Установите удобный `gap`.
- Проверьте длинный текст, малое число карточек и узкий контейнер.
Как настроить промежутки и выравнивание карточек
Сначала оцените сетку, затем отдельно настройте оформление элементов. Для проверки используйте список:
- На контейнере указан `display: grid`.
- Правило `grid-template-columns` применяется к непосредственным дочерним карточкам.
- Минимальная ширина колонки соответствует содержимому карточек.
- `gap` задаёт расстояние между рядами и колонками; если нужны разные интервалы, используйте `row-gap` и `column-gap`.
- При малом числе карточек они расширяются так, как ожидается при выбранном `auto-fit`.
- Длинные слова, изображения и кнопки не выходят за границы карточки.
- Оформление карточек не содержит случайных фиксированных размеров, мешающих сетке.
Если нужно изменить выравнивание элементов внутри ячеек, настройте свойства Grid-контейнера и карточек отдельно. Например, `align-items: start` выравнивает карточки по началу поперечной оси; для одинаковой высоты карточек проверьте, не ограничивают ли их размеры собственные правила.
Как сетка перестраивается на узких экранах
Число колонок меняется, когда в ширину контейнера перестают помещаться следующая колонка минимального размера и разделительный `gap`. На узком экране сетка переходит к меньшему числу колонок, вплоть до одной, если контейнер не вмещает больше.
Частые ошибки, которые мешают этому поведению:
- Указана фиксированная ширина колонки вместо гибкого `minmax()`.
- Минимум слишком велик для узкого контейнера, поэтому карточки переполняют страницу.
- Учитывается ширина окна, но сетка находится в более узкой колонке или боковой панели.
- Карточке задана фиксированная ширина, конфликтующая с шириной Grid-ячейки.
- Изображения не ограничены шириной родителя и выходят за пределы карточки.
- Длинные строки не переносятся и растягивают содержимое.
- Промежутки слишком велики для выбранной ширины карточки.
- Ожидается, что `auto-fit` сохранит пустые колонки; для этого поведения нужен `auto-fill`.
Для изображений можно задать `max-width: 100%; height: auto;`, а для содержимого карточки проверить переносы и собственные ограничения ширины.
Как проверить разметку и исправить частые сбои
Если автоматическое заполнение не подходит, выберите другой способ управления колонками:
- Явное число колонок. Уместно, когда на конкретном экране макет должен иметь строго заданное число столбцов.
- Медиазапросы. Подходят, если на разных диапазонах ширины нужны разные композиции, а не только автоматическое изменение числа колонок.
- `auto-fill` вместо `auto-fit`. Используйте, когда важно сохранить свободные места под потенциальные колонки, а не растягивать имеющиеся карточки.
Для диагностики сначала выберите контейнер в инструментах разработчика, проверьте применённое правило `grid-template-columns`, затем временно измените минимальную ширину и `gap`. Это помогает отличить проблему расчёта колонок от ошибки в разметке или оформлении карточки.
Нюансы auto-fit и minmax() на практике
Чем отличаются auto-fit и auto-fill?
`auto-fit` схлопывает незаполненные колонки, поэтому имеющиеся карточки могут занять освободившееся место. `auto-fill` сохраняет места для потенциальных колонок.
Что означает 1fr в minmax(15rem, 1fr)?
`1fr` позволяет колонке занять долю свободного пространства контейнера. Минимум `15rem` при этом ограничивает её сжатие.
Как определить подходящий минимум для карточки?
Ориентируйтесь на фактическое содержимое: заголовки, текст, изображения и кнопки. Проверьте карточку в узком контейнере и скорректируйте значение, если появляется переполнение или неудобные переносы.
Нужны ли медиазапросы для такой сетки?
Для автоматического изменения числа колонок обычно достаточно `auto-fit` и `minmax()`. Медиазапросы добавляют, если на конкретной ширине требуется отдельная композиция.
Почему карточки не становятся в несколько колонок?
Проверьте, что `display: grid` назначен родителю карточек и что правило колонок применяется к этому же элементу. Также убедитесь, что контейнер шире минимальной колонки с учётом промежутков.
Когда выбрать auto-fill?
Выбирайте `auto-fill`, если свободные места должны оставаться зарезервированными под потенциальные колонки. Если нужно растянуть фактически имеющиеся карточки, используйте `auto-fit`.
Можно ли использовать проценты вместо rem?
Можно задать другую единицу измерения, если она подходит макету. Важно, чтобы минимум позволял содержимому карточки оставаться читаемым и не провоцировал переполнение.