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