.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }На узком экране карточки образуют меньше колонок, на широком — больше.
УРОК 70 ИЗ 100
Создайте гибкую сетку карточек
Позвольте числу колонок автоматически реагировать на доступное пространство.
ШАГ 1 · ИЗУЧИТЕ
Как это работает
repeat(auto-fit, minmax(220px, 1fr)) создаёт столько колонок, сколько помещается; каждая имеет минимум 220px и может расти. auto-fit схлопывает пустые дорожки, а существующие карточки используют доступное пространство.
.cards { display: grid; grid-template-columns: repeat(4, 220px); }Четыре фиксированные колонки могут выйти за узкий экран и не реагируют автоматически на доступное место.
ШАГ 2 · ПРИМЕНИТЕ
Ваше задание
Создайте сетку с auto-fit, minmax(220px, 1fr) и gap 16px.
index.htmlCSS
Безопасный результатизолировано
Черновик хранится только в этом браузере.HTML и CSS разрешены · скрипты и сеть заблокированы
ШАГ 4 · ПРОВЕРЬТЕ
Что должно пройти
0%не проверено
- ○Карточки используют Grid.
- ○Число колонок адаптируется через auto-fit и minmax.
- ○Колонки и строки имеют gap 16px.
- ○Целевой элемент присутствует на странице.
Объясните логику решения
auto-fit адаптирует число дорожек, minmax защищает минимальную ширину, а 1fr распределяет оставшееся пространство между существующими колонками.