CSS subgrid: общие линии внутри независимых карточек
Почему вложенная сетка не выравнивает соседние карточки сама собой и как subgrid связывает колонки, строки, интервалы и содержимое.
Сетка и вложенная сетка — разные системы
Grid начинает работать с непосредственными детьми контейнера. Если в ячейке находится карточка со своими заголовком, описанием и кнопкой, эти внутренние элементы не становятся участниками внешней сетки автоматически. Объявление display: grid на карточке создаёт ещё одну сетку. Без дополнительных условий её размеры рассчитываются независимо от соседних карточек.
Отсюда возникает знакомая ситуация: внешние рамки выровнены, но кнопки и подписи внутри расположены на разной высоте. Число строк текста различается, а каждая вложенная сетка распределяет пространство отдельно. Одинаковая запись шаблона колонок не означает общего расчёта их ширины. В терминах Grid дорожка — пространство между соседними линиями, ячейка — пересечение одной строки и колонки, область — прямоугольник из нескольких ячеек. Согласование рамок областей ещё не согласует каждую внутреннюю дорожку.
Какие размеры передаёт subgrid
Значение subgrid задаётся для grid-template-columns, grid-template-rows либо обоих свойств. Вместо самостоятельного списка дорожек вложенный контейнер использует соответствующую часть родительской сетки. Если он занимает несколько колонок родителя, по этой оси получает столько же дорожек с согласованными границами. По другой оси он может оставаться обычной вложенной сеткой.
Это позволяет разделить две задачи. Родитель отвечает за общую геометрию ряда карточек, а карточка сохраняет собственный контейнер, фон, рамку и структуру документа. Её элементы размещаются уже относительно согласованных внутренних линий. Subgrid не делает всех потомков непосредственными детьми внешнего контейнера и не удаляет семантическую обёртку. Передаётся размерная система выбранной оси, а не все правила оформления родителя.
Форма с общими колонками и отдельными рамками
Спецификация Grid Level 2 приводит форму, где каждая строка содержит подпись и поле ввода. Общая сетка задаёт две колонки, но отдельная строка остаётся самостоятельным элементом списка с рамкой. Ей назначается область шириной в обе колонки, затем внутри включается subgrid по колонкам. Подпись занимает первую дорожку, поле — вторую.
Содержимое разных строк участвует в согласовании размеров. Длинная подпись может расширить общую колонку, если выбранный способ расчёта допускает влияние содержимого. Без subgrid отдельные строки могли бы получить разные границы между подписями и полями. Общие колонки могут использовать автоматические и гибкие размеры. Реальный результат зависит от их функций размера, доступного пространства, собственных ограничений полей и содержимого, а не только от присутствия ключевого слова subgrid.
Интервалы не исчезают между уровнями
По умолчанию интервалы дорожек согласуются с родителем, но вложенная сетка может переопределять gap, row-gap или column-gap. Это не создаёт новый независимый набор внешних линий. Меняется распределение пространства около уже связанных границ, поэтому визуальный результат иногда отличается от ожидания «просто убрать промежуток».
На схеме MDN показан subgrid с нулевым межстрочным интервалом внутри родительской сетки, у которой промежуток сохранён. Внутренний элемент получает пространство, занимаемое родительским интервалом; центральная линия проходит посередине этой области. Внешние рамки, padding и границы вложенного контейнера также не отменяются. Алгоритм учитывает их при согласовании размеров, сохраняя оформленные области самостоятельными.
Локальные номера и общие имена
Числовые линии внутри subgrid нумеруются заново. Первая линия вложенного компонента остаётся первой, даже если сам компонент начинается далеко не у первого края родительской сетки. Это позволяет описать размещение внутренних элементов независимо от текущего положения карточки на странице.
Именованные линии дают другой уровень связи. Родительские имена доступны во вложенной сетке, а собственные имена subgrid добавляются к ним. В обычном Grid имена записываются в квадратных скобках между размерами дорожек; у одной линии может быть несколько имён. Повторяющиеся имена разрешены и требуют различать конкретное вхождение при размещении. Поэтому название вроде content-start не является единственным глобальным адресом страницы. Оно имеет смысл внутри той сетки, относительно которой размещается элемент. Система имён связывает композицию, но не освобождает от понимания области и направления выбранной оси.
Авторазмещение и неизвестное число элементов
Обычная сетка умеет создавать неявные дорожки, если для автоматически размещаемых элементов не хватает явно заданных. Направление обхода задаёт grid-auto-flow, размеры новых дорожек — соответствующие auto-свойства. Исходно элементы занимают доступные ячейки по порядку, если их положение не было задано отдельно.
Значение dense разрешает заполнять оставшиеся отверстия более поздними элементами, которые туда помещаются. Оно не гарантирует сохранения визуального порядка исходного документа и не превращает Grid в алгоритм раскладки с произвольной высотой каждой колонки. Для списка переменной длины важна именно возможность создавать новые строки. Подмена такого списка двухосным subgrid меняет модель: доступная область становится связана с дорожками, которые занимает вложенный контейнер у родителя. Присутствие свободного места рядом ещё не означает, что браузер добавит нужную внутреннюю строку по той же оси.
Почему обёртка важнее визуального порядка
Сетка позволяет переставить блоки относительно исходной разметки. Но обычный порядок чтения и последовательного перемещения фокуса не следует автоматически за этой перестановкой. Например, первая ссылка в DOM может визуально оказаться в нижней части композиции и всё равно получить фокус раньше верхней.
Subgrid решает другую проблему: он позволяет сохранить обёртки содержательных групп и одновременно выровнять их внутренние элементы. У формы остаются строки, у карточки — собственная группа содержимого. Не требуется удалять эти элементы только ради превращения всех подписей и кнопок в прямых детей одного контейнера. Согласование линий при этом не назначает HTML-семантику: заголовок, список, подпись поля и ссылка сохраняют значения своих элементов. Визуальная общность колонок и логическая последовательность документа остаются отдельными свойствами интерфейса, даже когда обе организованы вокруг одного набора данных.
Где заканчивается связанная ось
По оси, объявленной subgrid, не создаётся собственная неявная сетка. В примере MDN дополнительные элементы, которым не хватает места в двухосной подсетке, попадают в последнюю доступную дорожку, а не вызывают бесконечное добавление рядов. Это следствие ограниченного числа родительских дорожек, а не случайная ошибка размещения.
Ось можно оставить независимой: например, связать колонки с родителем, но разрешить внутренние строки обычной сетки. Тогда содержимое растёт вниз собственными рядами, хотя эти ряды больше не обязаны совпадать с соседними компонентами. Аналогично возможна обратная схема с общими строками и самостоятельными колонками. Разные части страницы могут использовать обычные вложенные сетки и подсетки: источник размеров и способ расширения содержимого у них различаются.
| Шаблон вложенной сетки | Колонки | Строки |
|---|---|---|
| Обычные размеры по обеим осям | Самостоятельные | Самостоятельные |
| columns: subgrid | Родительские дорожки | Самостоятельные |
| rows: subgrid | Самостоятельные | Родительские дорожки |
| subgrid по обеим осям | Родительские дорожки | Родительские дорожки |
Источник: MDN: Subgrid
