Адаптивная сетка без медиазапросов
Условие
Карточки в .grid укладываются в столбцы шириной не меньше 200px, занимая всю ширину. Число столбцов меняется само при изменении ширины контейнера. Медиазапросы использовать нельзя. Отступ между карточками 12px.
Что проверяют тесты
это сетка
отступ между карточками
три столбца при ширине 660
столбцы занимают всю ширину
без медиазапросов
Как подойти
Одна строка заменяет три медиазапроса. minmax(200px, 1fr) означает «не уже двухсот, но дели остаток поровну», а auto-fill сам считает, сколько таких столбцов влезет. Разница с auto-fit: при малом числе карточек auto-fit растянет их на всю ширину, а auto-fill оставит пустые колонки - это первый уточняющий вопрос интервьюера.
Подсказки: 3
- repeat принимает auto-fill или auto-fit вместе с minmax.
- Верхняя граница 1fr заставляет столбцы делить свободное место.
- auto-fill оставляет пустые треки, auto-fit их схлопывает - разницу спросят.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.