CSS Grid с `minmax()` помогает собрать сетку, в которой колонки меняют ширину вслед за контейнером, сохраняя заданный минимум. Для карточек часто достаточно `grid-template-columns: repeat(auto-fit, minmax(мин_ширина, 1fr))`: браузер размещает столько колонок, сколько помещается. Перед внедрением проверьте минимальную ширину элементов и поведение сетки на узком экране.
Главное перед началом
- `minmax()` задаёт нижнюю и верхнюю границы размера колонки.
- `repeat()` сокращает запись повторяющихся колонок, а `auto-fit` или `auto-fill` определяют, как сетка использует свободное место.
- Для карточек задайте минимальную ширину, при которой текст и содержимое остаются читаемыми.
- Проверяйте макет на реальной ширине родительского контейнера, а не только окна браузера.
- Если сетка ломается, сначала проверьте минимальные размеры элементов и длинный контент.
Для каких случаев метод подходит
Такой подход удобен для карточек товаров, статей, галерей и других повторяющихся элементов, число колонок которых должно меняться без набора медиазапросов. Это распространённый вариант CSS Grid адаптивной сетки.
Не стоит применять его автоматически к любой разметке. Если на конкретной ширине должны меняться порядок блоков, их пропорции или композиция страницы, явные медиазапросы дадут больше контроля. Для сложных таблиц и элементов с фиксированными требованиями к ширине также может понадобиться отдельная схема.
Нужные ресурсы и условия
- Контейнер, которому можно назначить `display: grid`.
- Понимание желательной минимальной ширины колонки и расстояния между элементами.
- Браузер с поддержкой CSS Grid и инструменты разработчика для проверки вычисленной сетки.
- Тестовое содержимое: короткий и длинный заголовок, изображение, кнопка или другой элемент с потенциально большой шириной.
Для CSS Grid minmax примеры ниже используют относительные единицы: минимальная ширина задаётся в `rem`, а свободное место распределяется через `1fr`. Значения подберите под конкретный дизайн.
План действий по шагам
- Риски и ограничения. До изменения стилей учитывайте возможное переполнение из-за длинных слов, изображений с фиксированными размерами и минимальной ширины самих элементов. `auto-fit` может растягивать оставшиеся колонки, а `auto-fill` сохраняет места для колонок, которые могли бы поместиться. Проверьте макет в пределах реального контейнера и не удаляйте существующие правила, пока не сравните результат.
-
Определите ширину контейнера и минимальный размер колонки.
Выберите минимум, при котором карточка остаётся удобной для чтения и взаимодействия. Учитывайте внутренние отступы, изображение, заголовок и кнопки; не копируйте значение из чужого макета без проверки.
-
Назначьте контейнеру CSS Grid.
Создайте отдельный класс для сетки и задайте расстояние между элементами. Так стили сетки не затронут другие части страницы.
.cards { display: grid; gap: 1rem; } -
Задайте повторяющиеся колонки через `minmax()`.
Для сетки карточек начните с `auto-fit`: колонки заполнят доступную ширину, а свободное место распределится между ними. Это типичная основа для CSS Grid сетки карточек.
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; } -
Проверьте, нужен ли `auto-fill` вместо `auto-fit`.
Оставьте `auto-fit`, если хотите, чтобы существующие колонки растягивались, когда карточек мало. Попробуйте `auto-fill`, если важно сохранять свободные места под потенциальные колонки и не растягивать оставшиеся на всю ширину.
-
Защитите содержимое от переполнения.
Проверьте изображения, длинные заголовки и элементы с заданной шириной. При необходимости ограничьте ширину изображения и разрешите элементам сетки сжиматься.
.cards > * { min-width: 0; } .cards img { max-width: 100%; height: auto; } -
Проверьте сетку на разных ширинах.
Изменяйте ширину самого контейнера в инструментах разработчика. Убедитесь, что переход от нескольких колонок к одной происходит тогда, когда минимальная ширина и промежутки перестают помещаться.
Так строится адаптивная верстка на CSS Grid без привязки к фиксированному числу колонок. Если вы проходите обучение CSS Grid онлайн, проверяйте каждый пример в браузере и меняйте ширину контейнера, чтобы увидеть, как взаимодействуют `minmax()`, `auto-fit` и `auto-fill`.
Контроль результата
- Контейнер сжимается без горизонтальной прокрутки страницы.
- Минимальная ширина колонки позволяет читать текст и пользоваться элементами управления.
- Количество колонок меняется в соответствии с доступным пространством.
- При малом количестве карточек поведение `auto-fit` или `auto-fill` соответствует замыслу.
- Изображения не выходят за границы карточек.
- Длинные слова и ссылки не расширяют колонку неожиданным образом.
- Промежутки между карточками сохраняются на узком и широком контейнере.
- Другие блоки страницы не затронуты новым CSS-классом.
Критичные промахи и как их избежать
- Слишком большой минимум. На узком контейнере колонка не помещается. Уменьшите минимум или добавьте медиазапрос для отдельного сценария.
- Слишком маленький минимум. Карточки становятся тесными, а текст и кнопки теряют удобный размер. Определяйте нижнюю границу по содержимому, а не только по числу колонок.
- Непонимание разницы между `auto-fit` и `auto-fill`. Сравните оба варианта при небольшом числе элементов и оставьте тот, который соответствует ожидаемому размещению свободного места.
- Предположение, что `1fr` всегда устраняет переполнение. Длинное содержимое или минимальный размер вложенного элемента могут мешать сжатию. Проверьте `min-width: 0` и внутренние размеры.
- Тестирование только на ширине окна. Сетка может находиться внутри узкой боковой колонки. Проверяйте ширину именно родительского контейнера.
- Подстановка `minmax(0, 1fr)` без проверки. Она допускает сжатие колонки до нулевого минимума, но сама по себе не решает проблему нечитаемого или выступающего содержимого.
Рабочие альтернативы
- Явные медиазапросы. Подходят, когда на определённых ширинах нужен строго заданный состав колонок или меняется композиция страницы.
- Flexbox с переносом строк. Удобен для рядов элементов с переменной шириной, например тегов или кнопок; для равномерной двумерной сетки чаще нагляднее Grid.
- Фиксированное число колонок через `repeat()`. Полезно, если число колонок известно и должно быть постоянным на выбранных диапазонах ширины.
Вопросы, которые возникают на практике
Что означает `minmax()` в CSS Grid?
Функция задаёт минимальный и максимальный размер дорожки сетки. Например, `minmax(15rem, 1fr)` не позволяет колонке стать уже заданного минимума и разрешает ей занять долю свободного пространства.
Когда выбирать `auto-fit`, а когда `auto-fill`?
`auto-fit` схлопывает пустые дорожки и позволяет существующим колонкам растягиваться. `auto-fill` сохраняет пустые места для колонок, которые могли бы поместиться, поэтому оставшиеся элементы могут не занимать всю ширину.
Какое значение указывать как минимум колонки?
Выбирайте его по содержимому: учитывайте ширину текста, изображения и элементов управления. Затем проверьте на самой узкой ширине контейнера, где колонка ещё должна оставаться отдельной.
Почему сетка выходит за границы контейнера?
Причиной могут быть длинные слова, фиксированная ширина изображения или минимальный размер вложенного элемента. Проверьте содержимое, примените `max-width: 100%` к изображениям и при необходимости задайте элементам сетки `min-width: 0`.
Нужны ли медиазапросы при использовании `minmax()`?
Для автоматического изменения числа колонок они часто не нужны. Медиазапросы полезны, если требуется изменить отступы, типографику, порядок элементов или правила композиции на определённой ширине.
Чем отличается `minmax(0, 1fr)` от `minmax(15rem, 1fr)`?
В первом случае дорожке разрешено сжиматься до нулевого минимума, во втором она должна сохранять минимум в `15rem`. Выбирайте вариант по требованиям к ширине содержимого и проверяйте поведение на узком контейнере.
Как проверить адаптивность без реального телефона?
Измените ширину окна или контейнера в инструментах разработчика браузера и проверьте несколько сценариев с разным содержимым. Дополнительно убедитесь на целевых устройствах, что текст, изображения и элементы управления отображаются корректно.
Автор: Виктор Егоров.