Css grid: как создать сетку карточек с разным количеством колонок

CSS Grid собирает карточки в колонки, число которых можно задать явно или поручить браузеру. Для фиксированной раскладки используйте grid-template-columns, а для автоматической адаптации - сочетание repeat(), minmax() и auto-fit либо auto-fill. Выбор зависит от минимальной ширины карточки, свободного места и того, должны ли пустые колонки сохраняться.

Что определить до настройки колонок CSS Grid

• Минимальную ширину карточки, при которой текст и изображения остаются читаемыми.
• Нужное поведение на узких экранах: одна колонка, горизонтальная прокрутка или другая раскладка.
• Должны ли незаполненные колонки занимать место, когда карточек мало.
• Нужны ли отдельным карточкам особые размеры или расположение.
• Есть ли у контейнера доступная ширина и отступы, которые нужно учитывать при расчёте колонок.

Как задать базовую сетку карточек через grid-template-columns

Самый прямой способ - объявить контейнер сеткой и задать колонки в grid-template-columns. Такой подход подходит, когда количество колонок заранее известно, например в блоке сравнения или в фиксированной панели каталога.

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

repeat(3, ...) создаёт три колонки, а 1fr распределяет между ними свободное пространство. Обёртка minmax(0, 1fr) помогает не дать содержимому карточки принудительно расширить колонку сверх доступного размера.

Фиксированное число колонок не стоит оставлять без адаптации, если ширина контейнера меняется: на телефоне карточки могут стать слишком узкими. Для таких случаев удобнее автоматический режим или медиазапросы. Это базовый вариант, с которого часто начинают, когда решают, как создать сетку карточек CSS.

Автоматическое число колонок: auto-fit, auto-fill и minmax()

Для автоматической раскладки браузеру понадобятся CSS Grid, контейнер с доступной шириной и установленная минимальная ширина карточки. Дополнительные библиотеки и скрипты не требуются.

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

minmax(15rem, 1fr) задаёт нижнюю границу колонки и позволяет ей растягиваться. Если контейнер не вмещает ещё одну колонку минимальной ширины, браузер переносит карточку на следующую строку.

• auto-fit сворачивает пустые повторённые колонки, поэтому занятые карточками колонки могут растянуться на освободившееся место.
• auto-fill сохраняет места для колонок, которые могли бы поместиться, даже если карточек для них нет. Это полезно, когда важно удержать ширину ячеек и визуальный ритм.

Например, если в широкой области есть всего две карточки, auto-fit обычно растянет их на доступную ширину, а auto-fill оставит пустые ячейки в раскладке. Проверьте оба варианта на реальном числе карточек: результат зависит от ширины контейнера и заданного минимума.

Как управлять шириной карточек на разных экранах

Перед настройкой учитывайте риски: не задавайте минимум шире мобильного контейнера, проверяйте длинные слова и контент без переноса, не полагайтесь на пустые колонки как на способ выравнивания и тестируйте сетку при изменении числа карточек. Автоматическая раскладка удобна, но не заменяет проверку узких экранов.

1. Подготовьте контейнер. Примените display: grid и задайте промежуток между карточками через gap. Убедитесь, что родительский блок не ограничен неожиданной фиксированной шириной.
2. Задайте нижнюю границу карточки. Выберите значение, при котором заголовки и основное содержимое сохраняют читаемость. Например, начните с 15rem и проверьте, помещается ли колонка на узком экране.
3. Включите автоматическое заполнение. Используйте формулу repeat(auto-fit, minmax(15rem, 1fr)). Замените auto-fit на auto-fill, если пустые места должны сохранять ширину потенциальных колонок.
4. Проверьте поведение содержимого. Если длинный текст или изображение растягивает карточку, задайте ограничения соответствующим элементам. Для изображений часто используют max-width: 100%; для отдельных текстовых блоков может помочь min-width: 0.
5. Настройте особые ширины точечно. Если одна карточка должна занимать несколько колонок, добавьте ей отдельный класс и проверьте раскладку на разных ширинах.

Так строится адаптивная сетка CSS Grid без привязки к жёсткому числу колонок: браузер подбирает их количество по доступному пространству и заданному минимуму.

Адаптивные колонки через медиазапросы: когда они нужны

Медиазапросы уместны, когда на конкретной ширине нужно не просто изменить число колонок, а переключить композицию: например, сохранить три колонки на широком экране и перейти к одной на узком. После настройки проверьте результат по списку:

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

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 48rem) {
  .cards {
    grid-template-columns: 1fr;
  }
}

Значение точки переключения выбирайте по тому, когда карточки перестают помещаться удобно, а не только по названию устройства. Для более гибкой компоновки можно сохранить автоматический режим и добавлять медиазапросы лишь для особых изменений.

Как разместить отдельные карточки на несколько колонок

Элементу сетки можно задать диапазон колонок. Например, карточка с классом cards__featured может занимать две колонки:

.cards__featured {
  grid-column: span 2;
}

Если на узком экране остаётся одна колонка, сбросьте это правило, чтобы карточка не пыталась занимать больше места, чем доступно.

@media (max-width: 48rem) {
  .cards__featured {
    grid-column: auto;
  }
}

При такой настройке учитывайте типичные ошибки:

• Не задавайте span 2, если в соответствующем режиме сетка содержит только одну колонку.
• Не предполагайте, что элемент всегда окажется в нужном месте: автоматическое размещение зависит от порядка элементов и свободных ячеек.
• Не используйте жёсткие номера колонок без проверки при изменении ширины сетки.
• Не забывайте сбрасывать расширение карточки в мобильном режиме, если оно становится неуместным.
• Не допускайте, чтобы фиксированная ширина содержимого растягивала всю колонку.
• Проверяйте карточки с разным содержимым: заголовок, изображение или кнопка могут менять высоту и визуальный баланс.

Типичные сбои сетки и способы их устранить

Когда обычная формула не подходит, выберите другой способ по требованию к раскладке. Ниже - варианты, которые часто встречаются в CSS Grid примерах и шаблонах.

• Фиксированное число колонок. Используйте repeat(3, minmax(0, 1fr)), когда состав экрана предсказуем и важна строгая структура. Добавьте медиазапрос для узких контейнеров.
• Автоматическая минимальная ширина. Подходит для каталога, в котором количество карточек и ширина блока меняются. Проверьте, что заданный минимум помещается на самом узком экране.
• Явные медиазапросы. Выбирайте их, когда нужно управлять композиционными переходами и отдельными исключениями, а не только автоматически уменьшать число колонок.
• Flexbox. Рассмотрите его, если требуется линейное распределение элементов в строке с переносом, а выравнивание по строкам и колонкам не является задачей сетки.

Если сетка неожиданно переполняется, сначала проверьте минимальные размеры карточек и вложенных элементов, затем - ограничения ширины родителя и правила для отдельных карточек. Для верстки карточек на CSS Grid полезно также временно убрать специальные классы: так проще понять, создаёт ли проблему базовая формула или исключение.

Разбор спорных случаев при построении карточной сетки

Когда выбирать auto-fit, а когда auto-fill?

Выбирайте auto-fit, если занятые карточками колонки должны растягиваться при наличии свободного места. Используйте auto-fill, если пустые потенциальные колонки должны сохранять место и ширину раскладки.

Что задавать в minmax() для карточек?

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

Почему карточки не становятся уже заданного минимума?

minmax() не позволяет колонке опуститься ниже указанной минимальной ширины. Уменьшите минимум или переключите сетку на одну колонку через медиазапрос.

Нужны ли медиазапросы вместе с auto-fit?

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

Как не допустить горизонтальной прокрутки на телефоне?

Проверьте минимальную ширину колонки, фиксированные размеры изображений и длинные строки. Если автоматическая формула не помещается, задайте одну колонку для узкого экрана.

Как сделать карточку шире остальных?

Добавьте ей класс и задайте, например, grid-column: span 2. В режиме с одной колонкой сбросьте расширение, чтобы карточка оставалась в пределах сетки.

Почему auto-fit и auto-fill выглядят одинаково?

Когда свободных мест для дополнительных колонок нет или все доступные ячейки заняты, различие может быть незаметно. Сравните поведение при небольшом количестве карточек и широком контейнере.

Автор: Алексей Воронов.