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

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

⚡ Кратко

Финал раздела Grid — урок-сборка. Учимся осознанно выбирать раскладку: макет страницы (2D) → Grid, ряд/компонент (1D) → Flexbox. Собираем реальную страницу (дашборд / галерея / holy-grail) на Grid с областями header, nav, main, aside, footer.

О чём урок

Завершающий урок раздела Grid — практический. Здесь не новые свойства, а главный навык верстальщика: выбрать правильный инструмент раскладки под задачу и собрать из готовых блоков настоящую страницу.

Простое правило урока: макет всей страницы (две оси сразу) → Grid через grid-template-areas; ряд или компонент в одну линию → Flexbox. На реальной странице они работают вместе — каркас на Grid, ряды внутри на Flex.

header nav main aside footer
Макет, который соберём в мини-проекте: 5 областей на одной Grid-сетке.

Ключевые понятия

  • holy-grail
  • magazine layout
  • grid-template-areas
  • responsive grid
  • Flexbox vs Grid
  • layout decision

Структура урока

Теория

Модель Grid и ключевые понятия.

Справочник

Свойства урока с назначением.

Примеры

Рабочие CSS Grid-фрагменты.

Старый vs Новый

Сравнение со старыми layout-приёмами.

Задания

Самостоятельная практика.

Решения

Проверочные ответы.

Ошибки

Частые проблемы Grid.

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

Практическая работа.

Ресурсы

Документация и повторение.

Навигация