Урок 28. Решения: grid-area и сложные сетки

📁 Раздел: CSS Grid ⏱️ Время изучения: ~65 мин 🎯 Сложность: Средняя
#grid-template-areas #grid-area #grid-template-columns #grid-template-rows #grid-template #gap

⚡ Кратко

Ключевая идея решений: карта grid-template-areas рисует макет, а перестановка блоков — это правка одной только карты, без изменения HTML.

Решение задания 2 — классический макет

Карта в кавычках 1-в-1 повторяет целевую схему. header/footer повторены в обеих ячейках строки и потому тянутся на всю ширину.

header
sidebar
main
footer
.page {
  display: grid;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  grid-template-columns: 120px 1fr;
  grid-template-rows: auto 90px auto;
  gap: 10px;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Решение задания 3 — перенос sidebar без правки HTML

Поменяли местами слова в средней строке карты и порядок колонок. Свойства grid-area у элементов остались прежними — переехала только «планировка».

header
main
sidebar
footer
.page {
  grid-template-areas:
    "header  header"
    "main    sidebar"   /* поменяли только эту строку */
    "footer  footer";
  grid-template-columns: 1fr 120px;
}
/* grid-area у .sidebar / .main НЕ трогали */

Решение задания 6 — почему Grid, а не Flexbox

Каркас двумерный: одновременно есть строки (шапка / контент / подвал) и колонки (меню / основное). Flexbox раскладывает по одной оси, и для такого макета пришлось бы вкладывать несколько flex-контейнеров. Grid задаёт обе оси сразу, а grid-template-areas делает раскладку самодокументируемой.

Навигация