Урок 28. Обзор урока: grid-area и сложные сетки

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

⚡ Кратко

grid-template-areas описывает макет словами-«картой»: header, sidebar, content, footer. Читается как сам макет, и переставить блоки можно правкой одной карты — без правки HTML.

О чём урок

Главная фишка урока — grid-template-areas: «ASCII-карта» макета прямо в CSS. Вы рисуете строками в кавычках, где какой блок, а у элементов ставите grid-area: имя. На этом собирается классический каркас страницы — header / sidebar / content / footer.

header sidebar content footer
Каркас, который вы соберёте в уроке.

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

  • grid-template-areas — карта макета на контейнере
  • grid-area — имя области (или линии r/c/r/c) на элементе
  • точка . — пустая ячейка
  • прямоугольность областей и равная длина строк карты
  • перестановка блоков без правки HTML (в т.ч. через медиа-запросы)
  • когда Grid, а когда Flexbox

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

Теория

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

Справочник

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

Примеры

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

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

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

Задания

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

Решения

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

Ошибки

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

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

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

Ресурсы

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

Навигация