Для сетки карточек с автоматическим количеством колонок используйте repeat(auto-fit, minmax(..., 1fr)). Важная деталь для узких экранов: минимальная ширина колонки не должна оказаться больше самого контейнера. Иначе сетка может выйти за границы телефона.
В разборе Mentoring.digital сделаем небольшой каталог без фиксированного числа колонок и проверим, как он ведёт себя с разным содержимым.
Минимальная разметка и стили
<section class="cards" aria-label="Направления">
<article class="card"><h2>Python</h2><p>Первый скрипт.</p></article>
<article class="card"><h2>Java</h2><p>Объекты и коллекции.</p></article>
<article class="card"><h2>Frontend</h2><p>Вёрстка интерфейса.</p></article>
</section>.cards {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: 1rem;
}
.card {
min-width: 0;
padding: 1rem;
border: 1px solid #d9ded7;
overflow-wrap: anywhere;
}
.card img {
display: block;
max-width: 100%;
height: auto;
}
* { box-sizing: border-box; }Значение 16rem задаёт желаемый минимум карточки. Выражение min(100%, 16rem) уменьшает этот минимум, если весь контейнер уже. После размещения колонок свободное пространство распределяется через 1fr. Gap задаёт расстояние между карточками отдельно от их внутренних отступов.
Размер 16rem подходит только для этого упражнения. Подбирайте минимум по реальному содержимому: карточка с коротким названием и карточка с ценой, кнопкой и несколькими характеристиками требуют разного пространства.
Чем auto-fit отличается от auto-fill
Оба варианта рассчитывают, сколько колонок заданной ширины поместится в контейнер. Auto-fill сохраняет пустые треки. Auto-fit после размещения схлопывает пустые треки и их промежутки, поэтому оставшиеся карточки могут растянуться шире.
Разницу удобнее увидеть на широком контейнере с одной или двумя карточками. Если карточка не должна занимать почти всю строку, одного auto-fit недостаточно: можно выбрать auto-fill, ограничить ширину контейнера или пересмотреть правило максимальной ширины. Это решение дизайна, а не ошибка браузера.
Сетка не сортирует данные. Порядок карточек должен оставаться понятным в HTML, чтобы клавиатурная навигация и чтение страницы соответствовали содержимому. Не переставляйте смысловые элементы только визуальными координатами ради красивого ряда.
Почему даже правильная сетка иногда распирает страницу
Проверьте дочерние элементы: длинную ссылку без пробелов, изображение с фиксированной шириной, таблицу, input и вложенный flex-контейнер. Правило min-width: 0 разрешает карточке сжиматься, а overflow-wrap: anywhere позволяет переносить длинный текст. Эти свойства не отменяют жёсткую ширину вложенного блока.
Изображению в примере задан max-width: 100%. Для таблицы или кода, которые важно сохранить без переноса, лучше сделать локальную горизонтальную прокрутку внутри карточки. Не скрывайте горизонтальное переполнение у всей страницы: так можно просто обрезать недоступное пользователю содержимое.
При точном количестве одинаковых колонок, например трёх, полезно отдельно рассмотреть repeat(3, minmax(0, 1fr)) и медиазапросы. Этот вариант решает иную задачу, чем автоматическое размещение карточек с заданным минимумом.
Проверка на узком и широком экране
- Проверьте контейнер шириной 280, 390 и 1200 пикселей, а не только ширину окна.
- Оставьте одну карточку, затем добавьте несколько карточек сверх полной строки.
- Вставьте длинный заголовок, ссылку без пробелов и реальное изображение.
- Увеличьте масштаб текста и пройдите по ссылкам клавиатурой.
- Убедитесь, что прокрутка всей страницы остаётся вертикальной, а элементы не перекрывают друг друга.
Эти проверки важнее одного удачного скриншота с одинаковыми короткими словами. На занятиях по Frontend полезно собирать сетку сразу с крайними примерами содержимого. Наставник по вёрстке и Frontend поможет найти конкретный элемент, задающий лишнюю ширину, вместо добавления случайных отступов.
