subgrid: наследуемая сетка

Вложенный grid использует линии родительского трека.

Уровень: продвинутый 10 разделов 15 минут

1. Что это и зачем

Вложенный grid использует линии родительского трека.

Grid раскладывает элементы по двум осям сразу: объявляются треки (строки и колонки), а элементы размещаются по ним с помощью явного или неявного размещения. Grid — это система координат страницы.

{title} — идеален для каркаса страницы и повторяющихся карточек: одну сетку нельзя переписать flex'ом «в лоб».

2. Синтаксис и пример

.list { grid-template-columns: repeat(3, 1fr); } .item { grid-row: auto; grid-column: span 3; display: grid; grid-template-columns: subgrid; }

Запись выше — базовый вариант использования. Обратите внимание, как subgrid: наследуемая сетка вписывается в структуру документа: рядом с другими элементами он ведёт себя по правилам каскада и наследования, которые разобраны в курсе CSS.

3. Нюансы и частые варианты

Дробные единицы fr делят место пропорционально, minmax() защищает от переполнения, grid-template-areas описывает каркас словами. Поведение по умолчанию — автоматическое размещение по рядам.

В реальной разметке subgrid: наследуемая сетка встречается в связке с другими тегами и классами: компонентная разметка (БЭМ) и переменные из базового CSS-курса помогают держать такие случаи под контролем без дублирования правил.

4. Как это работает под капотом

{title} — идеален для каркаса страницы и повторяющихся карточек: одну сетку нельзя переписать flex'ом «в лоб».

Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.

5. Совместимость и поддержка

Grid поддержан во всех современных браузерах без префиксов; подложка (subgrid) — новее и требует проверки совместимости.

Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.

6. Распространённые ошибки

Строки карточек идеально выравниваются по родителю.

Поддержка растёт, но для старых браузеров нужен фолбэк.

7. Практическое задание

Выровняйте поля карточек через subgrid.

Попробуйте выполнить задание прямо в песочнице ниже — измените код из примера и оцените результат, а затем проверьте его надёжность в DevTools.

.list { grid-template-columns: repeat(3, 1fr); } .item { grid-row: auto; grid-column: span 3; display: grid; grid-template-columns: subgrid; }

8. Как применять в проектах

Каркас страницы (шапка, контент, боковая колонка), галереи, списки карточек, раскладки с выравниванием по рядам.

Этот приём работает в связке с остальными: раскладку страниц собирают в уроке Flexbox и Grid, цвет и контраст — в Цвет и контраст, типографику — в Веб-типографика.

9. Чек-лист перед сдачей

треки заданы через fr/minmax, а не только px;
явные области совпадают с визуальной картой;
для мелких строк flex, для каркаса grid;
переполнение контента обработано;
сетка перестраивается на мобильных;

Прогоните страницу через аудит производительности и доступности (Lighthouse в DevTools), чтобы поймать типовые промахи до публикации.

10. Как закрепить

Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам {rel1t} и {rel2t}, а знания подрядчите на странице Тесты HTML и CSS. Если хотите собрать первый настоящий проект — в уроке Практика: лендинг весь процесс разобран по шагам.

← Вернуться к курсам