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