В CSS Grid отсутствовала одна важная часть, когда его спецификация уровня 1 была выпущена в мир: Subgrid. Спецификация уровня 2 все еще находится в статусе «Рабочий проект», но у нас есть первая реализация браузера. Mozilla использует синтаксис Subgrid в Firefox Nightly.
Теперь, когда у нас есть живая реализация, я начал играть с подсеткой. Subgrid позволяет элементам, которые являются потомками контейнера Grid, участвовать в первоначальном определении сетки. Если вы хотите ознакомиться со всем, что связано с Grid Level 2, прочтите прекрасную статью Рэйчел Эндрю об этом.
В этой статье мы рассмотрим один конкретный вариант использования: расширение макета статьи с использованием сетки. Этот макет статьи позволит разбить определенные разделы контента на области полной ширины.
Настройка нашей сетки
Давайте углубимся в код.
Нашей первой задачей будет настройка базовой сетки нашей статьи. В этом случае мы воспользуемся преимуществами «именованных линий сетки» Grid, чтобы облегчить себе жизнь в будущем.
.article-body {
display: grid;
grid-template-columns: [fullWidth-start] 1rem
[left-start] 1fr
[article-start right-start] minmax(20ch, 80ch)
[article-end left-end] 1fr
[right-end] 1rem [fullWidth-end];
}
Эта настройка дает нам 1rem отступы слева и справа, за которыми следуют «переменные мягкие» отступы в 1fr. Наконец, у нас есть центральный столбец с минимальным размером 20ch и максимальным размером 80ch. Единица ch, дающая нам удобную длину строки чтения для центральной колонки.
Мы можем использовать имена в фигурных скобках ( []), чтобы затем разместить контент в любой из областей, которые мы создали с помощью grid-column: fullWidth;.
Пытаетесь представить это? Ок, вот краткий рисунок для иллюстрации:
Размещение контента в нашей сетке
Теперь, когда наша сетка настроена, нам нужно правильно разместить на ней контент. Любые элементы внутри элемента article-body будут заполнять области сетки по горизонтальной оси. Это будет выглядеть абсолютно сломанным (разговорное слово означает ДЕЙСТВИТЕЛЬНО сломанным).
Давайте исправим это, поместив любой прямой дочерний элемент в столбец article сетки.
.article-body > * {
grid-column: article;
}
.full-width {
grid-column: fullWidth;
background-color: lightblue; /* Для нужного чувства полной ширины! */
}
Теперь наш общий контент будет в удобной ограниченной колонке, а любой элемент с class="full-width"будет идти полосой во всю ширину.
Это достаточно удобно, если не углубляться. Все, что находится внутри этого элемента, не может быть оформлено как полноценный элемент со всеми необходимыми пробелами. Но что, если вы хотите, чтобы элемент центрировался точно так же внутри полосы? Вам нужно будет создать новый контекст сетки и создать столбцы нужного размера. В нашем примере мы могли бы это сделать, но в некоторых случаях, связанных с «переменной мягкостью», это может сделать это невозможным. Даже если в нашем случае это возможно, код заставит нас повторяться странным образом.
Чтобы создать дополнительные макеты внутри нашей полосы полной ширины, которые участвуют в первоначальном объявлении сетки, нам нужна подсетка!
Вводим подсетку
Спецификация subgrid дает нам доступ к столбцам и/или строкам исходного объявления сетки. Я помню, как слышал споры о синтаксисе и о том, должен ли он наследовать всю сетку или позволить автору управлять столбцами или строками. Я так рад, что они остановились там, где остановились. Синтаксис кажется вдохновляющим.
В нашем случае использования нам просто нужны столбцы.
.full-width {
display: grid;
grid-template-columns: subgrid;
}
Вот и все! теперь мы получаем все столбцы, которые были объявлены в .article-body.
Давайте воспользуемся этими именованными строками и создадим несколько классов, которые мы сможем использовать для различных типов контента внутри полосы полной ширины.
.fullWidth-center {
grid-column: article;
}
.fullWidth-right {
grid-column: right;
text-align: right;
}
.fullWidth-left {
grid-column: left;
}
Когда мы соберем все это вместе, мы сможем создать несколько интересных макетов с минимальными усилиями!
Вот готовый Codepen . Вам нужно будет запустить сборку Firefox Nightly , чтобы увидеть готовый продукт.
Говоря о том, что вам нужен конкретный браузер... Я слышу некоторых из вас!
"Но Брайан!", — ты говоришь, — «Браузеры еще не поддерживают это! Даже когда современные браузеры поддерживают это, старый браузер все еще нуждается в поддержке! Думаю, мы пока не можем использовать это. Ну ладно!»
Нет нет. Так просто не отделаешься.
Поддержка браузеров, не поддерживающих подсетку
Точно так же, как поддерживаем браузеры, которые еще не поддерживают Grid, мы можем поддерживать браузеры, которые не поддерживают subgrid.
Поскольку мы знаем, что ответ на вопрос « Должны ли веб-сайты выглядеть одинаково в каждом браузере (... точка ком...) — «Нет», —давайте поговорим о том, как этот шаблон проектирования может выглядеть в старых браузерах.
Что, если мы обозначим наши полосы как полноразмерные с центрированным содержимым? В большинстве ситуаций этого должно быть достаточно. Это чистый шаблон проектирования, и затем мы можем двигаться дальше, к более новым, более крутым шаблонам проектирования.
Давайте поговорим о том, что нам нужно изменить.
Во-первых, давайте объявим базовый стиль для .full-width. Мы будем использовать один из моих любимых неожиданных шаблонов дизайна: самоцентрирующуюся полосу с сеткой .
.full-width {
grid-column: fullWidth; /* Устанавливает, где находится элемент в родительской сетке */
background-color: lightblue; /* Чудный светлый голубой! */
display: grid; /* Задаём новый контекст Grid */
grid-template-columns: minmax(20ch, 80ch); /* 1 столбец, соответствующий размеру [article] */
justify-content: center; /* Центрируем контент */
padding: 1rem; /* Поддерживает отступы в форме для мобильных устройств */
}
Теперь мы воспользуемся мощью CSS Feature Queries, чтобы перейти к поддержке подсеток. Для этого мы удалим несколько значений из предыдущего кода и поместим наш код подсетки в CSS.
@supports (grid-template-columns: subgrid) {
.full-width {
grid-template-columns: subgrid; /* меняет столбцы с 1 на наследование линий сетки */
padding: 0; /* Убираем padding... они встроены в наши колонки */
}
/* Остальные нужные нам селекторы */
.fullWidth-center {
grid-column: article;
}
.fullWidth-right {
grid-column: right;
text-align: right; /* Не надо выравнивать текст по правому краю, если элемент также не выровнен по правому краю */
}
.fullWidth-left {
grid-column: left;
}
}
Теперь у вас есть интересный макет в браузерах, которые поддерживают подсетку, и совершенно прекрасный макет для браузеров, которые этого не делают.
Будущее веб-верстки удивительно. Для каких других шаблонов дизайна вы можете использовать CSS Subgrid?