Области Grid в CSS
Урок Grid Items учил номерам линий и span. Именованные области задают более дружелюбный вопрос: можно ли нарисовать страницу словами — header, sidebar, main, footer — и пусть каждый потомок займёт свою метку? grid-template-areas — это карта; grid-area — булавка.
Набор инструментов областей grid
📊 Области grid одним взглядом
| Свойство / токен | Повседневная роль |
|---|---|
grid-template-areas |
На контейнере: строки в кавычках именуют каждую ячейку |
grid-area |
На элементе: какую именованную область занимает этот потомок |
| Повтор имени | То же имя в соседних ячейках = один растянутый прямоугольник |
. (точка) |
Пустая ячейка без имени |
| Треки шаблона | Размер по-прежнему задают grid-template-columns / rows |
Каждая строка в кавычках — один ряд карты. Имена внутри ряда разделяются пробелами. В каждом ряду должно быть одинаковое число ячеек, иначе шаблон недействителен.
grid-template-areas — нарисуйте карту
Запишите задуманный макет простыми метками. Классическая оболочка страницы часто выглядит как четыре именованные роли на трёх рядах.
.shell {
display: grid;
grid-template-columns: 14rem 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"aside main"
"footer footer";
gap: 1rem;
}
grid-area — закрепите каждого потомка
Каждый потомок выбирает одно имя с карты. Классы могут остаться в стиле BEM; Grid читает токен области.
.shell__header { grid-area: header; }
.shell__aside { grid-area: aside; }
.shell__main { grid-area: main; }
.shell__footer { grid-area: footer; }
Растяжение повтором имени
Чтобы растянуть область, напишите то же имя в каждой ячейке, которая должна ей принадлежать. Область должна оставаться цельным прямоугольником — без L-форм.
.magazine {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"hero hero hero"
"card1 card2 card3";
gap: 0.75rem;
}
.magazine__hero { grid-area: hero; }
Пустые ячейки точкой
Одиночная . отмечает дыру. Полезно, когда доска карточек должна оставить пробел без выдуманного имени.
.board {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"alpha ."
"beta gamma";
gap: 0.5rem;
}
.board__a { grid-area: alpha; }
.board__b { grid-area: beta; }
.board__c { grid-area: gamma; }
Спокойная привычка именованных областей
Набросайте карту в grid-template-areas, задайте размер треков колонками/строками, затем закрепите потомков через grid-area. Держите имена короткими и прямоугольными. Возвращайтесь к grid-column / grid-row, когда разовое размещение яснее, чем переписывать всю карту. Адаптивные переписывания карты ждут урока Grid Responsive.
.page {
display: grid;
grid-template-columns: minmax(12rem, 16rem) 1fr;
grid-template-areas:
"nav content"
"nav content";
gap: 1.25rem;
}
.page__nav { grid-area: nav; }
.page__content { grid-area: content; }
Попробуйте сами
- Нарисуйте карту header / aside+main / footer через
grid-template-areas. - Назначьте четырёх потомков совпадающими значениями
grid-area. - Соберите трёхколоночного героя, повторяя
heroв первом ряду. - Оставьте одну пустую ячейку с
.на доске два на два. - Держите размеры треков на контейнере; смену карты отметьте для следующего адаптивного урока Grid.
Частые ошибки
- Именование L-образной или разрозненной области (области должны быть прямоугольниками)
- Разное число ячеек между строками в кавычках
- Размещение
grid-template-areasна потомке вместо контейнера - Путать имена областей с селекторами CSS-классов — это токены шаблона
- Убирать
grid-template-columns/rowsв надежде, что одни имена зададут размеры
Кратко
- Именованные области превращают макет в читаемую карту ячеек
grid-template-areasживёт на контейнере;grid-area— на каждом элементе- Повторите имя для span; используйте
.для пустых ячеек - Держите области прямоугольными и сочетайте имена с размером треков
- Размещение по линиям всё ещё работает; адаптивные смены карты — дальше
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху