Изучение неявной сетки CSS Grid и возможностей автоматического размещения

При работе с CSS Grid первое, что нужно сделать, это установить display: grid на элементе, который мы хотим сделать контейнером сетки. Затем мы явно определяем сетку, используя комбинацию grid-template-columns, grid-template-rowsкачества grid-template-areas. И оттуда следующий шаг — разместить элементы внутри сетки.

Это классический подход, который следует использовать, и я также рекомендую его. Однако есть и другой подход к созданию сеток. без явного определения. Мы называем это неявная сетка.

"Сказку сделать былью? Что, черт возьми, здесь происходит?»

Странные термины, правда? Мануэль Матузович уже и хорошее объяснение того, что мы можем называть «неявным» и «явным» в CSS Grid, но давайте углубимся в то, что домен specification говорит:

Ассоциация grid-template-rows, grid-template-columnsкачества grid-template-areas свойства определяют фиксированное количество дорожек, которые формируют явная сетка. Когда элементы сетки располагаются за пределами этих границ, контейнер сетки генерирует неявные дорожки сетки, добавляя в сетку неявные линии сетки. Эти линии вместе с явной формой сетки неявная сетка.

Итак, говоря простым языком, браузер автоматически генерирует дополнительные строки и столбцы в случае, если какие-либо элементы оказались за пределами определенной сетки.

Что с авторазмещением?

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

В различных вариантах использования мы увидим, как такие функции могут помочь нам создать сложную и динамичную сетку с помощью нескольких строк кода.

Динамическая боковая панель

Здесь у нас есть три разных макета, но у нас есть только одна конфигурация сетки, которая работает для всех из них.

main {
  display: grid;
  grid-template-columns: 1fr;
}

Только одна колонка занимает все свободное место. Это наша «явная» сетка. Он настроен на размещение одного элемента сетки в main сетчатый контейнер. Это все. Один столбец и одна строка:

Но что, если мы решим добавить туда еще один элемент, скажем, aside (наша динамическая боковая панель). Поскольку это определено в настоящее время (и явно), наша сетка должна автоматически подстраиваться, чтобы найти место для этого элемента. И если мы больше ничего не делаем с нашим CSS, вот что говорит нам DevTools.

Мы можем переместить <aside> к колонне рядом с <section>:

aside {
  grid-column-start: 2;
}

И вот что нам сейчас говорит DevTools:

Мы помещаем наш элемент во второй столбец, но... у нас нет второго столбца. Странно, да? Мы никогда не объявляли второй столбец в <main> контейнер сетки, но браузер создал его для нас! Это ключевая часть спецификации, которую мы рассмотрели:

Когда элементы сетки располагаются за пределами этих границ, контейнер сетки генерирует неявные дорожки сетки, добавляя в сетку неявные линии сетки.

Эта мощная функция позволяет нам иметь динамические макеты. Если у нас есть только <section> элемент, все, что мы получаем, это один столбец. Но если мы добавим <aside> элемента в микс, создается дополнительный столбец для его содержания.

Мы могли бы разместить <aside> до <section> вместо этого вот так:

aside {
  grid-column-end: -2;
} 

Это создает неявный столбец в начале сетки, в отличие от предыдущего кода, который помещает неявный столбец в конец.

Мы можем сделать то же самое проще, используя grid-auto-flow свойство, чтобы установить любые и все неявные дорожки для потока в column управление:

Теперь нет необходимости указывать grid-column-start разместить <aside> элемент справа от <section>! На самом деле, любой другой элемент сетки, который мы решаем добавить туда в любое время, теперь будет перемещаться в направлении столбца, каждый из которых размещается на своих собственных неявных дорожках сетки. Идеально подходит для ситуаций, когда количество элементов в сетке заранее неизвестно!

Тем не менее, нам все еще нужно grid-column-end если мы хотим поместить его в столбец слева от него, потому что в противном случае <aside> будет занимать явный столбец, который, в свою очередь, толкает <section> вне явной сетки и заставляет ее использовать неявный столбец.

Я знаю я знаю. Это немного запутанно. Вот еще один пример, который мы можем использовать, чтобы лучше понять эту маленькую причуду:

В первом примере мы не указывали места размещения. В этом случае браузер сначала поместит <aside> элемент в явном столбце, так как он стоит первым в DOM. <section>, тем временем автоматически помещается в столбец сетки, который браузер автоматически (или неявно) создает для нас.

Во втором примере мы устанавливаем <aside> элемент вне явной сетки:

aside {
  grid-column-end: -2;
}

Теперь это не имеет значения <aside> идет первым в HTML. путем переназначения <aside> где-то еще, мы сделали <section> элемент, доступный для использования явного столбца.

Сетка изображений

Давайте попробуем что-то другое с сеткой изображений, где у нас есть большое изображение и несколько миниатюр рядом с ним (или под ним).

У нас есть две конфигурации сетки. Но знаете что? Я вообще не определяю сетку! Все, что я делаю, это:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Удивительно, что нам нужна всего одна строка кода, чтобы реализовать что-то подобное, поэтому давайте разберем, что происходит, и вы увидите, что это проще, чем вы думаете. Прежде всего, grid-area — это сокращенное свойство, которое объединяет следующие свойства в одно объявление:

• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

Ждать! Разве это не grid-area свойство, которое мы используем для определения именованные области вместо того, где элементы начинаются и заканчиваются в сетке?

Да, но он также делает больше. Мы могли бы написать намного больше о grid-area, но в данном конкретном случае:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* ...is equivalent to: */
.grid img:first-child {
  grid-row-start: span 3;
  grid-column-start: span 3;
  grid-row-end: auto;
  grid-column-end: auto;
}

Мы можем увидеть то же самое при взломе DevTools, чтобы расширить сокращенную версию:

Это означает, что первый элемент изображения в сетке должен охватывать три колонны и три ряда. Но поскольку мы не определяли ни столбцов, ни строк, браузер делает это за нас.

По сути, мы разместили первое изображение в HTML так, чтобы оно занимало сетку 3⨉3. Это означает, что любые другие изображения будут автоматически размещены в тех же трех столбцах без необходимости указывать что-либо новое.

Подводя итог, мы сказали браузеру, что первое изображение должно занимать пространство в три столбца и три строки, которые мы никогда не определяли явно при настройке контейнера сетки. Браузер установил для нас эти столбцы и строки. Как результат, остальные изображения в HTML встают на место, используя те же три столбца и строки. И поскольку первое изображение занимает все три столбца в первой строке, остальные изображения перетекают в дополнительные строки, каждая из которых содержит три столбца, где каждое изображение занимает один столбец.

Все это из одной строчки CSS! В этом сила «неявной» сетки и автоматического размещения.

Для второй конфигурации сетки в этой демонстрации все, что я сделал, это изменил автоматическое направление потока, используя grid-auto-flow: column так же, как мы делали ранее, размещая <aside> элемент рядом с <section>. Это заставляет браузер создать четвертый столбец, который он может использовать для размещения оставшихся изображений. И поскольку у нас есть три строки, остальные изображения помещаются в один и тот же вертикальный столбец.

Нам нужно добавить несколько свойств к изображениям, чтобы убедиться, что они хорошо вписываются в сетку без какого-либо переполнения:

.grid {
  display: grid;
  grid-gap: 10px;
}

/* for the second grid configuration */
.horizontal {
  grid-auto-flow: column;
}

/* The large 3⨉3 image */
.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* Help prevent stretched or distorted images */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

И, конечно же, мы можем легко обновить сетку, чтобы учесть больше изображений, изменив одно значение. Это было бы 3 в стилях для большого изображения. У нас есть это:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Но мы могли бы добавить четвертый столбец, просто изменив его на 4 вместо:

.grid img:first-child {
  grid-area: span 4 / span 4;
}

Еще лучше: давайте настроим это как пользовательское свойство, чтобы упростить обновление.

Динамические макеты

Первым вариантом использования боковой панели был наш первый динамический макет. Теперь мы займемся более сложными макетами, где количество элементов будет определять конфигурацию сетки.

В этом примере у нас может быть от одного до четырех элементов, где сетка настраивается таким образом, чтобы точно соответствовать количеству элементов, не оставляя каких-либо неудобных зазоров или недостающих пробелов.

Когда у нас есть один элемент, мы ничего не делаем. Элемент будет растягиваться, чтобы заполнить единственную строку и столбец, автоматически созданные сеткой.

Бит, когда мы добавляем второй элемент, мы создаем еще один (неявный) столбец, используя grid-column-start: 2.

Когда мы добавляем третий элемент, он должен занимать ширину двух столбцов — поэтому мы использовали grid-column-start: span 2, но только если это :last-child потому что если (и когда) мы добавим четвертый элемент, он должен занимать только один столбец.

Добавляя это, мы имеем четыре конфигурации сетки только с две декларации и магия неявной сетки:

.grid {
  display: grid;
}
.grid :nth-child(2) {
  grid-column-start: 2;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}

Давайте попробуем другой:

Мы ничего не делаем для первого и второго случаев, когда у нас есть только один или два элемента. Однако, когда мы добавляем третий элемент, мы сообщаем браузеру, что до тех пор, пока это :last-child — он должен занимать две колонки. Когда мы добавляем четвертый элемент, мы сообщаем браузеру, что этот элемент нужно поместить во второй столбец.

.grid {
  display: grid;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}
.grid :nth-child(4) {
  grid-column-start: 2;
}

Вы начинаете получать трюк? Мы даем браузеру конкретные инструкции на основе количества элементов (используя :nth-child), а иногда одна инструкция может полностью изменить раскладку.

Следует отметить, что размер не будет одинаковым, когда мы работаем с разным контентом:

Поскольку мы не определяли никаких размеров для наших элементов, браузер автоматически определяет их для нас на основе их содержимого, и в итоге мы можем получить другой размер, чем тот, который мы только что видели. Чтобы преодолеть это, мы должны эксплицитно укажите, что все столбцы и строки имеют одинаковый размер:

grid-auto-rows: 1fr;
grid-auto-columns: 1fr;

Эй, мы еще не играли с этими свойствами! grid-auto-rows и grid-auto-columns установить размер неявных строк и столбцов, соответственно, в контейнере сетки. Или, как спецификация объясняет это:

Ассоциация grid-auto-columns и grid-auto-rows свойства определяют размер дорожек, которым не назначен размер grid-template-rows or grid-template-columns.

Вот еще один пример, где мы можем дойти до шести элементов. На этот раз я позволю вам проанализировать код. Не волнуйтесь, селекторы могут показаться сложными, но логика довольно проста.

Даже с шестью элементами нам нужно было всего два объявления. Представьте себе все сложные и динамичные макеты, которые мы можем создать с помощью нескольких строк кода!

Что происходит с этим grid-auto-rows и почему он принимает три значения? Мы определяем три строки?

Нет, мы не определяем три строки. Но мы Он определение трех значений в качестве шаблона для наших неявных строк. Логика следующая:

• Если у нас есть одна строка, она получит размер с первым значением.
• Если у нас есть две строки, первая получает первое значение, а вторая — второе значение.
• Если у нас есть три строки, будут использоваться три значения.
• Если у нас есть четыре строки (и здесь начинается самое интересное), мы используем три значения для первых трех строк и снова используем первое значение для четвертой строки. Вот почему это своего рода шаблон, который мы повторяем для определения размера всех неявных строк.
• Если у нас есть 100 строк, они будут иметь размер три на три, чтобы иметь 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1fr, и т.д.

В отличие от grid-template-rows который определяет количество строк и их размеры, grid-auto-rows только строки размеров, которые могут быть созданы по пути.

Если мы вернемся к нашему примеру, логика состоит в том, чтобы иметь одинаковый размер при создании двух строк (мы будем использовать 2fr 2fr), но если создается третья строка, мы делаем ее немного меньше.

Шаблоны сетки

Для этого последнего мы собираемся поговорить о шаблонах. Вы, вероятно, видели эти два макета столбцов, где один столбец шире другого, и каждая строка чередует расположение этих столбцов.

Этот макет сортировки может быть слишком сложным, если вы точно не знаете, с каким объемом контента мы имеем дело, но неявные возможности автоматического размещения CSS Grid делают его относительно простым.

Взгляните на код. Это может показаться сложным, но давайте разберем его, потому что это довольно просто.

Первое, что нужно сделать, это определить шаблон. Спросите себя: «Через сколько элементов узор должен повторяться?» В этом случае это после каждых четырех элементов. Итак, давайте пока рассмотрим использование только четырех элементов:

Теперь давайте определим сетку и настроим общий шаблон, используя :nth-child селектор для чередования элементов:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows equal to 100px */
}
.grid :nth-child(4n + 1) { /* ?? */ }
.grid :nth-child(4n + 2) { /* ?? */ }
.grid :nth-child(4n + 3) { /* ?? */ }
.grid :nth-child(4n + 4) { /* ?? */ }

Мы сказали, что наш паттерн повторяется через каждые четыре элемента, поэтому логично будем использовать 4n + x в котором x варьируется от 1 до 4. Немного проще объяснить шаблон следующим образом:

4(0) + 1 = 1 = 1st element /* we start with n = 0 */
4(0) + 2 = 2 = 2nd element
4(0) + 3 = 3 = 3rd element
4(0) + 4 = 4 = 4th element
4(1) + 1 = 5 = 5th element /* our pattern repeat here at n = 1 */
4(1) + 2 = 6 = 6th element
4(1) + 3 = 7 = 7th element
4(1) + 4 = 8 = 8th element
4(2) + 1 = 9 = 9th element /* our pattern repeat again here at n = 2 */
etc.

Идеально, верно? У нас есть четыре элемента, и повторяем узор на пятом элементе, девятом элементе и так далее.

Те :nth-child селекторы могут быть хитрыми! У Криса есть супер полезный объяснение как все это работаетв том числе рецепты создания разных узоров.

Теперь настраиваем каждый элемент так, чтобы:

1. Первый элемент должен занимать два столбца и начинаться с первого столбца (grid-column: 1/span 2).
2. Второй элемент помещается в третий столбец (grid-column-start: 3).
3. Третий элемент помещается в первый столбец: (grid-column-start: 1).
4. Четвертый элемент занимает два столбца и начинается со второго столбца: (grid-column: 2/span 2).

Вот это в CSS:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: 1/span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 3; }
.grid :nth-child(4n + 3) { grid-column-start: 1; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Мы могли бы остановиться здесь и закончить… но мы можем сделать лучше! В частности, мы можем удалить некоторые объявления и положиться на возможности автоматического размещения сетки, которые сделают эту работу за нас. Это самая сложная часть для грока и требует большой практики, чтобы определить, что можно удалить.

Первое, что мы можем сделать, это обновить grid-column: 1 /span 2 и использовать только grid-column: span 2 так как по умолчанию браузер поместит первый элемент в первый столбец. Мы также можем удалить это:

.grid :nth-child(4n + 3) { grid-column-start: 1; }

Размещая первый, второй и четвертый элементы, сетка автоматически размещает третий элемент в правильном месте. Это означает, что у нас осталось это:

.grid {
  display: grid;
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
  grid-auto-columns: 1fr; /* all the columns are equal */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Но давай, мы можем прогуляться, сделать лучше! Мы также можем удалить это:

.grid :nth-child(4n + 2) { grid-column-start: 2; }

Почему? Если мы поместим четвертый элемент во второй столбец, позволив ему занять два полных столбца, мы заставим сетку создать третий неявный столбец, дав нам в общей сложности три столбца без явного указания. Четвертый элемент не может попасть в первую строку, поскольку первый элемент также занимает два столбца, поэтому он переходит в следующую строку. Эта конфигурация оставляет нам пустой столбец в первой строке и пустой столбец во второй строке.

Я думаю, вы знаете конец истории. Браузер автоматически поместит второй и третий элементы в эти пустые места. Так наш код становится еще проще:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Все, что нужно, это пять объявлений, чтобы создать очень крутой и очень гибкий шаблон. Часть оптимизации может быть сложной, но вы привыкнете к ней и научитесь некоторым хитростям с практикой.

Почему бы не использовать grid-template-columns определить явные столбцы, поскольку мы знаем количество столбцов?

Мы можем это сделать! Вот код для него:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1),
.grid :nth-child(4n + 4) {
  grid-column: span 2;
}

Как видите, код определенно более интуитивно понятен. Мы определяем три явных столбца сетки и сообщаем браузеру, что первый и четвертый элементы должны занимать два столбца. Я очень рекомендую этот подход! Но цель этой статьи — исследовать новые идеи и приемы, которые мы получаем благодаря неявным возможностям CSS Grid и возможности автоматического размещения.

Явный подход более прямолинеен, в то время как неявная сетка требует от вас — извините за каламбур — заполнения пробелов, в которых CSS выполняет дополнительную работу за кулисами. В конце концов, я считаю, что четкое понимание неявных сеток поможет вам лучше понять алгоритм CSS Grid. В конце концов, мы здесь не для того, чтобы изучать очевидное — мы здесь, чтобы исследовать дикие территории!

Давайте попробуем другой шаблон, на этот раз немного быстрее:

Наш узор повторяется через каждые шесть элементов. Каждый третий и четвертый элементы должны занимать две полные строки. Если мы разместим третий и четвертый элементы, кажется, что нам не нужно трогать остальные, поэтому попробуем следующее:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 3) {
  grid-area: span 2/2; /* grid-row-start: span 2 && grid-column-start: 2 */
}
.grid :nth-child(6n + 4) {
  grid-area: span 2/1; /* grid-row-start: span 2 && grid-column-start: 1 */
}

Хм, нехорошо. Нам нужно поместить второй элемент в первый столбец. В противном случае сетка автоматически поместит его во второй столбец.

.grid :nth-child(6n + 2) {
  grid-column: 1; /* grid-column-start: 1 */
}

Уже лучше, но работы еще больше, Нам нужно сместить третий элемент наверх. Заманчиво попробовать разместить его в первой строке следующим образом:

.grid :nth-child(6n + 3) {
  grid-area: 1/2/span 2; 
    /* Equivalent to:
       grid-row-start: 1;
       grid-row-end: span 2;
       grid-column-start: 2 
     */
}

Но это не работает, потому что заставляет всех 6n + 3 элементы размещаются в одной и той же области, что делает макет беспорядочным. Реальное решение состоит в том, чтобы сохранить исходное определение третьего элемента и добавить grid-auto-flow: dense чтобы заполнить пробелы. Из MDN:

[] Алгоритм «плотной» упаковки пытается заполнить в отверстиях ранее в сетке, если более мелкие элементы появятся позже. Это может привести к тому, что элементы будут отображаться не по порядку, поскольку это заполнит пробелы, оставленные более крупными элементами. Если он опущен, используется «разреженный» алгоритм, в котором алгоритм размещения перемещается только «вперед» в сетке при размещении элементов, никогда не возвращаясь назад для заполнения пробелов. Это гарантирует, что все автоматически размещенные элементы отображаются «по порядку», даже если остаются пробелы, которые могли быть заполнены более поздними элементами.

Я знаю, что это свойство не очень интуитивно понятно, но никогда не забывайте об этом, когда сталкиваетесь с проблемой размещения. Прежде чем напрасно пробовать разные конфигурации, добавьте его, потому что он может исправить ваш макет без дополнительных усилий.

Почему бы не всегда добавлять это свойство по умолчанию?

Я не рекомендую это, потому что в некоторых случаях мы не хотим такого поведения. Обратите внимание, что в объяснении MDN упоминается, что это приводит к тому, что элементы передаются «не по порядку», чтобы заполнить дыры, оставленные более крупными элементами. Визуальный порядок обычно так же важен, как и исходный порядок, особенно когда речь идет о доступных интерфейсах. grid-auto-flow: dense иногда может вызвать несоответствие между визуальным и исходным порядком.

Тогда наш окончательный код:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: dense;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 2) { grid-column: 1; }
.grid :nth-child(6n + 3) { grid-area: span 2/2; }
.grid :nth-child(6n + 4) { grid-row: span 2; }

Еще один? Пойдем!

Для этого я не буду много говорить, а вместо этого покажу вам иллюстрацию кода, который я использовал. Попробуйте посмотреть, понимаете ли вы, как я достиг этого кода:

Элементы черного цвета неявно размещаются в сетке. Следует отметить, что один и тот же макет мы можем получить большим количеством способов, чем то, каким я его получил. Ты тоже можешь их разгадать? Как насчет использования grid-template-columns? Поделитесь своими работами в разделе комментариев.

Я собираюсь оставить вас с последним шаблоном:

Я делаю есть решение для этого, но теперь ваша очередь практиковаться. Возьмите все, что мы узнали, и попробуйте закодировать это самостоятельно, а затем сравните это с моим решением. Не волнуйтесь, если вы закончите что-то многословное — самое главное найти работающее решение.

Хочу больше?

Прежде чем мы закончим, я хочу поделиться несколькими вопросами о переполнении стека, связанными с CSS Grid, где я ответил с ответами, в которых используются многие из методов, которые мы рассмотрели здесь вместе. Это хороший список, который показывает, сколько реальных вариантов использования и реальных ситуаций возникает, когда эти вещи пригодятся:

Подведение итогов

CSS Grid существует уже много лет, но все еще есть много малоизвестных и часто используемых приемов, которые широко не обсуждаются. Неявная сетка и функции автоматического размещения — две из них!

И да, это может стать проблемой! Мне потребовалось много времени, чтобы понять логику неявных сеток, и я все еще борюсь с автоматическим размещением. Если вы хотите потратить больше времени на изучение явных и неявных сеток, вот несколько дополнительных объяснений и примеров, которые стоит проверить:

Точно так же вы можете прочитать о grid-auto-columns в альманахе CSS-Tricks, потому что Моджтаба Сейеди уделяет большое внимание деталям и включает невероятно полезные визуальные эффекты, помогающие объяснить поведение.

Как я уже говорил, когда мы начинали, рассмотренные здесь методы не предназначены для замены уже известных вам способов построения сеток. Я просто изучаю различные способы, которые могут быть полезны в некоторых случаях.