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