Subgrid для выравнивания вложенного содержимого
Используйте subgrid, чтобы выравнивать вложенные элементы сетки по дорожкам родительской сетки.
«Subgrid для выравнивания вложенного содержимого» — бесплатный урок CSS Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Проблема подгридов
Распространённая задача: у Вас есть сетка карточек, и каждая карточка содержит верхний колонтитул, тело и нижний колонтитул. Без подгрида элементы в разных карточках нельзя выровнять по одним и тем же базовым линиям, поскольку каждая карточка является отдельной независимой раскладкой.
Что такое подсетка?
subgrid — это значение для grid-template-columns или grid-template-rows, которое заставляет вложенную сетку наследовать определения дорожек родительской сетки и участвовать в них.
grid-template-rows: subgrid
Элемент сетки, который одновременно является контейнером сетки, может использовать subgrid, чтобы выровнять дочерние элементы по дорожкам родительской сетки:
<div class="card-grid">
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Body</div>
<div class="card-footer">Footer</div>
</div>
</div>grid-template-columns: subgrid
Аналогично, подсетка столбцов позволяет выровнять вложенные элементы по столбцам родительской сетки — это удобно для согласованного размещения пар «метка — значение» или полей формы в столбцах карточек.
Подсетка и выравнивание содержимого
Без подсетки можно частично выровнять содержимое с помощью align-content или фиксированной высоты, но такой подход ненадёжен. Подсетка обеспечивает настоящее выравнивание на основе фактической высоты содержимого.
Подсетка для выравнивания формы
Выравнивание пар «метка — поле ввода» в нескольких столбцах формы:
<div class="form-grid">
<div class="form-section">
<label>Name</label><input placeholder="Name" />
<label>Email</label><input placeholder="Email" />
</div>
</div>Подсетка охватывает строки и столбцы
Подсетка может охватывать несколько дорожек родительской сетки и наследовать дорожки в обоих направлениях:
<div class="layout"><div class="feature">Feature spans grid</div></div>Именованные области с подсеткой
Если подсетка наследует именованные дорожки родительской сетки, эти имена становятся доступными для размещения элементов внутри контейнера подсетки.
Наследование промежутков
По умолчанию подсетки наследуют значения gap родительской сетки. Вложенная сетка участвует в той же системе промежутков.
Примечание о поддержке браузерами
Подсетка доступна в Файрфоксе с 2019 года. Хром добавил её поддержку в 2023 году. Теперь её поддерживают все современные браузеры. Перед использованием в рабочей среде проверьте поддержку в браузерах целевой аудитории.
Постепенное улучшение с подсеткой
Для старых браузеров предусмотрите резервный вариант с фиксированной высотой или выравниванием с помощью флексбокса, а затем добавьте подсетку как улучшение:
<div class="card-grid"><div class="card">Card content</div></div>Быстрая проверка
Что делает grid-template-rows: subgrid, заданное для элемента сетки?
Итоги
Подсетка решает проблему выравнивания вложенного содержимого, например в сетках карточек, где элементы разных карточек должны выравниваться по одной базовой линии. Используйте grid-template-rows: subgrid для элементов сетки, охватывающих несколько строк, а grid-template-columns: subgrid — для вложенного содержимого, выровненного по столбцам. Современные браузеры теперь поддерживают эту возможность повсеместно.
Часто задаваемые вопросы
Урок «Subgrid для выравнивания вложенного содержимого» бесплатный?
Да — полный текст урока «Subgrid для выравнивания вложенного содержимого» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Subgrid для выравнивания вложенного содержимого»?
Используйте subgrid, чтобы выравнивать вложенные элементы сетки по дорожкам родительской сетки. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Subgrid для выравнивания вложенного содержимого»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Именованные линии и области сетки
- Auto-fit и auto-fill с minmax
- Неявная сетка и Grid-Auto-Flow
- Subgrid для выравнивания вложенного содержимого