Урок 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. Такой код легче читать, чем номера линий.

Документация

MDN: grid-template-areas — синтаксис карты областей.
MDN: grid-area — имя области и шорткат по линиям.
MDN: Grid template areas (руководство).
CSS-Tricks: A Complete Guide to CSS Grid.
web.dev: Learn CSS Grid.

Тренажёры

Grid Garden — игра для отработки Grid-свойств.
Grid by Example (Rachel Andrew) — готовые паттерны макетов.

Что повторить перед уроком: урок 26 (введение в Grid), урок 27 (строки/колонки и линии), Flexbox, box model и работа с Grid overlay в DevTools.

Навигация