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

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

⚡ Кратко

Каркас и сетка карточек — на Grid; ряды кнопок — на Flex. Ниже — рабочие решения с живым результатом.

Решение задания 1 — выбор инструмента

БлокИнструментПочему
Каркас страницыGrid2D: строки и колонки сразу
Горизонтальное менюFlexbox1D: элементы в одну линию
Галерея карточекGrid2D-сетка, auto-fit + minmax
Пара кнопок по краямFlexbox1D-ряд, justify-content: space-between

Решение задания 2 — holy-grail

header
nav
main
aside
footer
📄 lesson-30/solution.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; } .nav { grid-area: nav; }
.main { grid-area: main; } .aside { grid-area: aside; }
.footer { grid-area: footer; }

Имя области повторяется в нескольких ячейках строки — так header и footer растягиваются на все три колонки. minmax(0, 1fr) у main не даёт длинному контенту распирать колонку.

Решение задания 3 — адаптивная галерея

1
2
3
4
.gallery {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

Решение задания 4 — Flex в ячейке + мобильный

📄 lesson-30/solution.css
/* шапка карточки — 1D ряд → Flex */
.card-head { display: flex; align-items: center; gap: .5rem; }
.card-head .title { flex: 1; }

/* узкий экран: области в одну колонку */
@media (max-width: 640px) {
  .holy-grail {
    grid-template-areas: "header" "nav" "main" "aside" "footer";
    grid-template-columns: 1fr;
  }
}

На мобильном переопределяем только grid-template-areas и колонку — структура HTML не меняется.

Навигация