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

Задача: Мини-проект 4: сверстайте журнальный holy-grail макет на Grid с областями header, nav, main, aside и footer.

Разметка

Создайте контейнер и несколько дочерних блоков.

Grid

Опишите строки, колонки или области на контейнере.

Проверка

Включите Grid overlay и проверьте треки, gap и placement.

Мини-проект 4: holy-grail / журнальный макет

Соберите header, nav, main, aside, footer.
Используйте grid-template-areas для desktop-макета.
Внутри header выстройте логотип и меню на Flexbox.
Добавьте простое правило для узкого экрана: области идут одной колонкой.

Целевой результат (desktop):

Так должен выглядеть готовый макет на широком экране.

📄 lesson-30/index.html

<body class="holy-grail">
  <header class="header">…</header>
  <nav class="nav">…</nav>
  <main class="main">…</main>
  <aside class="aside">…</aside>
  <footer class="footer">…</footer>
</body>

📄 lesson-30/mini-project.css

.holy-grail {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  grid-template-columns: 14rem minmax(0, 1fr) 16rem;
  gap: 1rem;
}
.header { grid-area: header; display: flex; justify-content: space-between; align-items: center; }
.nav    { grid-area: nav; }
.main   { grid-area: main; }
.aside  { grid-area: aside; }
.footer { grid-area: footer; }

/* мобильный: одна колонка */
@media (max-width: 640px) {
  .holy-grail {
    grid-template-areas: "header" "nav" "main" "aside" "footer";
    grid-template-columns: 1fr;
  }
}

Логоменю

nav

main

aside

footer

/* контейнер на Grid, шапка внутри — на Flex:
   ровно то сочетание, к которому вёл урок */

Проверка в браузере

Открой страницу, включи Grid overlay в DevTools — должны подсветиться 3 строки и 3 колонки.
Сузь окно до < 640px — макет должен перестроиться в одну колонку.
В header проверь Flexbox overlay: лого и меню по краям.

Урок 30. Домашнее задание: Когда что использовать + мини-проект 4

⚡ Кратко