Условие
В style.css оформите контейнер .layout как CSS Grid. Колонки: 2fr 1fr 1fr, промежуток gap: 12px. Имена областей пишите именно так: hero, side, ad, foot (это не цвета — названия ячеек сетки). Ориентир — вкладка «Результат».
Что нужно сделать
- У
.layout:display: grid,grid-template-columns: 2fr 1fr 1fr,gap: 12px. - У
.layoutзадайте карту областей ровно так:grid-template-areas: "hero hero side" "hero hero ad" "foot foot foot";- ряд 1 —
hero hero side(герой на 2 колонки, справа новость); - ряд 2 —
hero hero ad(герой продолжается, справа реклама); - ряд 3 —
foot foot foot(подвал на всю ширину).
- Привяжите блоки к именам:
.hero→grid-area: hero;.side→grid-area: side;.ad→grid-area: ad;.foot→grid-area: foot.
Подсказка для новичка
Повтор имени hero в двух колонках и двух рядах делает героя большим прямоугольником. Цвета блоков уже в стартере — менять их не нужно. Разбор свойств — в «Дополнительной информации».
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Журнал: герой, колонки и подвал
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Свойства этой задачи
<!DOCTYPE html>- документ HTML5.<html lang="ru">/<head>/<meta charset="UTF-8" />/<title>/<link rel="stylesheet" href="style.css" />- шапка документа.<body>- видимое содержимое.<div class="layout">- журнальная сетка.<div class="hero">/.side/.ad- герой, новость, реклама.<footer class="foot">- подвал на всю ширину.display: grid,grid-template-columns,grid-template-areas,grid-area,gap,2fr/1fr- именованные области.
Слева два файла: style.css (здесь решаете задание) и index.html (готовая разметка, менять не нужно). Ниже - разбор стилей и важных деталей задачи.
Файл style.css - что уже написано
Есть
.layout
(размер, фон, рамка, padding) и общие стили для
.hero, .side, .ad, .foot
плюс отдельные фоны и
min-height.
Сетки и областей ещё нет.
Правило .layout
-
width: 420px/min-height: 280px- размер контейнера. -
background: #eee,border: 2px solid #333,padding: 12px. -
В решении:
display: grid,gap: 12px,grid-template-columns: 2fr 1fr 1fr(герой шире двух правых колонок), иgrid-template-areasс тремя строками:"hero hero side","hero hero ad","foot foot foot".
Общие и отдельные стили блоков
-
Общий блок
.hero, .side, .ad, .foot:color: #fff,font-family: Arial, sans-serif,font-weight: 700,text-align: center,padding: 12px,box-sizing: border-box. -
.hero- фон#7c3aed,min-height: 80px; в решенииgrid-area: hero. -
.side-#1e293b,min-height: 64px,grid-area: side. -
.ad-#0d9488,min-height: 64px,grid-area: ad. -
.foot-#334155,min-height: 40px,grid-area: foot.
Named areas
grid-template-areas
рисует карту сетки словами. Повторение имени
hero
в двух колонках и двух рядах делает героя большим прямоугольником.
grid-area: имя
на элементе вкладывает его в эту область. Без назначения
grid-area
карта областей не «подхватит» блоки.
Коротко: три колонки
2fr 1fr 1fr,
карта areas для hero/side/ad/foot, каждому блоку -
свой
grid-area.
Сверьте с вкладкой
«Результат».