Рабочие примеры
В каждом блоке сверху — реальная сетка, снизу — код, который её создаёт. Идём от простого к сложному.
1. Две именованные колонки
Самая базовая карта: одна строка, два слова — две области рядом. Имя из карты связывается с элементом через grid-area.
.page {
display: grid;
grid-template-areas: "sidebar content";
grid-template-columns: 160px 1fr;
gap: 12px;
}
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }2. Классический макет header / sidebar / main / footer
Главный приём урока. header и footer повторены в обеих ячейках строки — поэтому тянутся на всю ширину. Карта в кавычках читается как сам макет.
.page {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 130px 1fr;
grid-template-rows: auto 90px auto;
gap: 10px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }3. Тот же HTML — другая раскладка
Преимущество areas: чтобы перенести sidebar вправо, мы поменяли только карту. Элементы и их grid-area не тронуты.
.page {
display: grid;
grid-template-areas:
"header header"
"main sidebar" /* было: sidebar main */
"footer footer";
grid-template-columns: 1fr 130px; /* колонки тоже поменяли местами */
}
/* grid-area у элементов НЕ меняли — переехала только карта */4. Пустая ячейка через точку .
Точка на месте имени оставляет ячейку пустой. Здесь правый-верхний угол свободен — туда ничего не попадает.
.page {
display: grid;
grid-template-areas:
"nav ." /* правая верхняя ячейка пустая */
"nav content";
grid-template-columns: 120px 1fr;
grid-template-rows: 50px 90px;
gap: 10px;
}
.nav { grid-area: nav; }
.content { grid-area: content; }5. Дашборд: область на две колонки и две строки
Имя можно повторять и по горизонтали, и по вертикали — область станет крупным прямоугольником. Здесь main занимает 2×2 ячейки.
.dashboard {
display: grid;
grid-template-areas:
"head head head"
"main main aside"
"main main stat";
grid-template-columns: 1fr 1fr 110px;
grid-template-rows: 44px 60px 60px;
gap: 8px;
}
.head { grid-area: head; }
.main { grid-area: main; } /* прямоугольник 2 колонки × 2 строки */
.aside { grid-area: aside; }
.stat { grid-area: stat; }6. Шорткат grid-area по линиям
Без карты у grid-area есть и другая форма — четыре числа линий: row-start / col-start / row-end / col-end. Полезно для точечной правки одного элемента.
.feature {
/* row-start / col-start / row-end / col-end */
grid-area: 1 / 1 / 3 / 2; /* занять обе строки в 1-й колонке */
}display: grid — браузер подсветит линии, треки, gap и подпишет имена областей.