Понимание CSS Grid: линии сетки

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

Мы рассмотрим:

1. Свойства размещения grid-column-start , grid-column-end , grid-row-start , grid-row-end и их сокращения grid-column и grid-row .
2. Как использовать grid-area для размещения по номеру строки.
3. Как размещать предметы в соответствии с названием строки.
4. Разница между неявной и явной сеткой при размещении элементов.
5. Используя ключевое слово span с небольшим бонусом subgrid .
6. На что обратить внимание при смешивании автоматически размещенных и размещенных элементов.

• Часть 1: Создание грид-контейнера
• Часть 2: Линии сетки
• Часть 3: Области шаблона сетки

Основные понятия линейного позиционирования

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

 .item { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 4; }

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

 .item { grid-column: 2 / 4; grid-row: 1 / 4; }

На CodePen вы можете увидеть пример и изменить строки, которые охватывает элемент.

Обратите внимание, что причина, по которой фон нашего прямоугольника растягивается по всей области, заключается в том, что начальные значения свойств align-self и justify-self равны stretch.

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

 .item { grid-column: 2 / 3; }

Также было бы совершенно правильно пропустить финишную черту:

 .item { grid-column: 2; }

grid-area

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

 .item { grid-area: 1 / 2 / 4 / 4; }

Порядок номеров строк следующий: grid-row-start , grid-column-start , grid-row-end , grid-column-end . Если вы работаете на горизонтальном языке, написанном слева направо (например, на английском), это сверху, слева, снизу, справа. Возможно, вы поняли, что это противоположно тому, как мы обычно указываем сокращения, такие как поля в CSS, — они работают сверху, справа, снизу, слева.

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

Линии на явной сетке

Я упомянул о явной и неявной сетке в своей прошлой статье. Явная сетка — это сетка, которую вы создаете с помощью свойств grid-template-columns и grid-template-rows . Определяя дорожки столбцов и строк, вы также определяете линии между этими дорожками, а также на начальных и конечных краях вашей сетки.

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

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

Если вы работаете в режиме вертикального письма, а на изображении ниже я установил writing-mode: vertical-rl , тогда строка 1 будет в начале направления блока в этом режиме письма, в данном случае справа. Строка 1 в линейном направлении находится вверху.

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

Конечная линия вашей явной сетки имеет номер -1 , и строки отсчитываются от этой точки, что делает строку -2 второй от последней строки. Это означает, что если вы хотите распределить элемент по всем дорожкам явной сетки, вы можете сделать это с помощью:

 .item { grid-column: 1 / -1; }

Линии на неявной сетке

Если вы создали неявные дорожки сетки, то они также начинают считаться с 1. В приведенном ниже примере я создал явную сетку для столбцов, однако дорожки строк были созданы в неявной сетке, где я использую grid-auto-rows . чтобы размер их до 5em.

Элемент с классом Placed был placed в диапазоне от строки строки 1 до строки строки -1. Если бы мы работали с явной сеткой для наших двух строк, то элемент должен охватывать две строки. Поскольку дорожки строк были созданы в неявной сетке, строка -1 преобразуется в строку 2, а не в строку 3.

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

Размещение элементов в именованных строках

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

 .grid { display: grid; grid-template-columns: [full-start] 1fr [main-start] 2fr 2fr [main-end full-end]; }

Если у вас есть несколько именованных строк, вы можете поменять номер строки на имя при размещении своих предметов.

 .item { grid-column: main-start / main-end; } 

Если ваша строка имеет несколько имен, вы можете выбрать любое из них при размещении вашего предмета, все имена будут преобразованы в одну и ту же строку.

Примечание . Когда вы называете линии, происходит несколько интересных вещей. Взгляните на мою статью «Именование объектов в CSS Grid Layout», чтобы узнать больше.

Что произойдет, если есть несколько строк с одинаковым именем?

Вы получаете интересное поведение, если у вас есть несколько строк с одинаковым именем. Это ситуация, которая может произойти, если вы называете строки в нотации repeat() . В приведенном ниже примере у меня есть сетка из 8 столбцов, созданная путем 4-кратного повторения шаблона 1fr 2fr . Я назвал линию перед меньшей дорожкой sm и большей дорожкой lg . Это означает, что у меня есть 4 строки с каждым именем.

В этой ситуации мы можем использовать имя в качестве индекса. Таким образом, чтобы поместить элемент, начинающийся со второй строки с именем sm и растягивающийся до третьей строки с именем lg , я использую grid-column: sm 2 / lg 3 . Если вы используете имя без номера, оно всегда будет разрешаться в первую строку с этим именем.

Использование ключевого слова span

Бывают ситуации, когда вы знаете, что хотите, чтобы элемент занимал определенное количество дорожек, однако вы не знаете точно, где он будет располагаться в сетке. Например, вы размещаете элементы с помощью автоматического размещения, но хотите, чтобы они охватили несколько дорожек, а не 1 по умолчанию. В этом случае вы можете использовать ключевое слово span . В приведенном ниже примере мой элемент начинается со строки auto , это строка, в которую его поместит автоматическое размещение, и затем он охватывает 3 дорожки.

 .item { grid-column: auto / span 3; } 

Этот метод станет очень полезным, когда у нас будет широкая поддержка значения subgrid для grid-template-columns и grid-template-rows . Например, в макете карточки, где у карточек есть заголовок и основная область содержимого, в которых вы хотите выровнять друг друга, вы можете сделать так, чтобы каждая карточка занимала 2 строки, сохраняя при этом обычное поведение автоматического размещения. Отдельные карты будут использовать subgrid для своих строк (т.е. получать по две строки каждая). Вы можете увидеть это в приведенном ниже примере, если вы используете Firefox, и прочитайте мою статью CSS Grid Level 2: Here Comes Subgrid, чтобы узнать больше о подсетке.

/

Наслоение элементов с линейным размещением

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

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

Смешивание линейного и автоматического размещения

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

Поведение по умолчанию — всегда двигаться вперед и оставлять пробел, если элемент не помещается в сетке. Вы можете управлять этим поведением, используя свойство grid-auto-flow со значением dense . В этом случае, если есть элемент, который соответствует пробелу, уже оставшемуся в сетке, он будет размещен не в исходном порядке, чтобы заполнить пробел. В приведенном ниже примере с использованием плотной упаковки элемент 3 теперь помещается перед элементом 2.

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

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

Чтобы продемонстрировать в этом последнем примере, я поместил элементы 1 и 2 со свойствами позиционирования на основе строк, оставив первую строку пустой. Более поздние элементы были перемещены, чтобы заполнить пробелы.

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

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

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

• Часть 1: Создание грид-контейнера
• Часть 2: Линии сетки
• Часть 3: Области шаблона сетки