Условие
В style.css соберите макет .layout: узкий сайдбар слева (~120px), контент справа занимает оставшееся место, между блоками отступ 12px. Шапка и подвал тянутся на всю ширину. У вас должно получиться так же, как во вкладке «Результат» - смотрите там конкретный итог задания.
Что нужно сделать
- Соберите страницу сеткой с отступом между блоками 12px.
- Сделайте узкий сайдбар (~120px) и широкую колонку контента.
- Растяните шапку и подвал на всю ширину макета.
Подсказка для новичка
Шапка и подвал должны занимать весь ряд сетки, а не только одну колонку. Имена свойств - в «Дополнительной информации».
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Шапка и подвал во всю ширину · сайдбар
Как пользоваться 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">- сетка-обёртка.<header class="header">- шапка макета.<aside class="sidebar">- боковое меню.<main class="content">- основная область.<footer class="footer">- подвал.display: grid,grid-template-columns,gap,grid-column- раскладка сетки.1fr/120px/1 / -1- колонки и растягивание на всю ширину.
Слева два файла: style.css (здесь решаете задание) и index.html (готовая разметка, менять не нужно). Ниже - разбор стилей и важных деталей задачи.
Файл style.css - что уже написано
Стилизованы
.layout
и блоки
.header,
.sidebar,
.content,
.footer
(цвета, высота через
min-height,
центрирование текста). У всех четырёх блоков в старте есть
margin-bottom: 8px
- при включении Grid его убирают (отступы даст
gap).
Правило .layout
-
width: 360px- ширина макета. -
background: #eee,border: 2px solid #333,padding: 12px- фон, рамка, внутренний отступ. -
В решении:
display: grid,gap: 12px,grid-template-columns: 120px 1fr- две колонки: сайдбар 120px и контент на оставшуюся долю.
Правила блоков макета
-
.header-min-height: 48px, фон#7c3aed, белый текст,text-align: center,line-height: 48px. В решении:grid-column: 1 / -1- растянуть на все колонки. -
.sidebar-min-height: 120px, фон#1e293b, центрирование текста. Занимает первую колонку (120px). -
.content- похожие стили, фон#0d9488; вторая колонка (1fr). -
.footer-min-height: 40px, фон#334155; в решении тожеgrid-column: 1 / -1.
Сетка и grid-column
При двух колонках элементы по умолчанию заполняют ячейки слева направо.
Шапка и подвал должны занять обе колонки:
grid-column: 1 / -1
значит «от первой линии до последней» (вся ширина сетки).
Тогда порядок визуально такой: шапка сверху на всю ширину → сайдбар + контент в одном ряду → подвал снизу на всю ширину.
Коротко:
display: grid
+
120px 1fr
+
gap: 12px;
у header и footer -
grid-column: 1 / -1.
Уберите стартовые
margin-bottom.
Сверьте с вкладкой
«Результат».