Домашнее задание

Задача: соберите макет dashboard через grid-template-areas с областями header, sidebar, content и footer, а затем сделайте мобильную раскладку в одну колонку.

Целевой результат для широкого экрана:

header

sidebar

content

footer

<div class="page">
  <header class="site-header">…</header>
  <aside class="sidebar">…</aside>
  <main class="content">…</main>
  <footer class="site-footer">…</footer>
</div>

Разметка

Создайте контейнер .page и четыре блока: header, sidebar, content, footer.

Карта областей

На контейнере опишите grid-template-areas, колонки и строки; каждому блоку задайте grid-area.

Мобильная версия

В @media (max-width: 600px) перепишите карту в одну колонку (header → content → sidebar → footer), HTML не меняя.

Проверка

Включите Grid overlay (F12), сузьте окно и убедитесь, что раскладка переключается.

📄 lesson-28/homework.css

.page {
  display: grid;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  grid-template-columns: 16rem 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  min-height: 100vh;
}
.site-header { grid-area: header; }
.sidebar     { grid-area: sidebar; }
.content     { grid-area: content; }
.site-footer { grid-area: footer; }

@media (max-width: 600px) {
  .page {
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;   /* одна колонка — стопка */
  }
}

Подсказка: HTML и grid-area у блоков в медиа-запросе не трогаются — меняется только карта на контейнере. В этом и сила grid-template-areas.

Урок 28. Домашнее задание: grid-area и сложные сетки

⚡ Кратко