Когда вы впервые изучаете, как использовать Grid-разметку, можно начать с размещения элементов на сетке по номерам линий. В этом случае необходимо следить за тем, где на сетке проходят определённые линии, и помнить о том, что последовательность их номеров меняется на противоположную, если сайт отображается для языков, которые пишутся справа налево.
На основе этой системы линий работают техники, делающие возможным именование линий и даже grid-областей. Использование этих техник позволяет размещать элементы по имени, а не по номеру. В этой статье я подробно рассмотрю различные способы именования линий и областей в CSS Grid разметке, а также несколько интересных возможностей, которые они создают.
Начнём с именования линий сетки. На примере ниже есть Grid с шестью явными колоночными треками и одним явным строчным треком. Элементы размещаются на сетке с помощью номеров линий.
.grid { display: grid; grid-gap: 20px; grid-template-rows: 20vh ; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; }
.header { grid-row: 1; grid-column: 1 / -1; }
.sidebar { grid-row: 2; grid-column: 1 / 3; }
.content { grid-row: 2; grid-column: 3 / -1; }
Если необходимо, имена линиям можно задать внутри квадратных скобок в списке треков. Здесь важно помнить, что вы именуете линию, а не трек, который следует после неё. Назвав линии, вы можете использовать их имена вместо номеров при позиционировании элементов на сетке.
.grid { display: grid; grid-gap: 20px; grid-template-rows: [header-start] 20vh [header-end] ; grid-template-columns: [sidebar-start] 1fr 2fr [sidebar-end] 1fr 2fr 1fr 2fr; }
.header { grid-row: header-start; grid-column: 1 / -1; }
.sidebar { grid-row: 2; grid-column: sidebar-start / sidebar-end; }
Имя может быть любым, кроме ключевого слова span. По причинам, о которых вы узнаете позже в этой статье, хорошей практикой является именование с использованием суффикса -start для начальных линий (не важно, это линия строки или колонки), и -end для конечных. В итоге должно получиться main-start и main-end или sidebar-start и sidebar-end.
Довольно часто конечная линия одной части сетки и начальная линия другой части совпадают, но это не проблема, так как линии могут иметь несколько имён. Задать линии несколько имён можно, добавив их через пробел внутри квадратных скобок.
.grid { display: grid; grid-gap: 20px; grid-template-rows: [header-start] 20vh [header-end] ; grid-template-columns: [full-start sidebar-start] 1fr 2fr [sidebar-end main-start] 1fr 2fr 1fr 2fr [main-end full-end]; }
.header { grid-row: header-start; grid-column: full-start / full-end; }
.sidebar { grid-row: 2; grid-column: sidebar-start / sidebar-end; }
.content { grid-row: 2; grid-column: main-start / main-end; }
Этот пример демонстрирует, что вам не обязательно называть каждую отдельную линию сетки, и что всегда остаются доступны номера линий, которые можно использовать помимо имён.
Мы увидели как линии могут иметь несколько имён, но также встречаются ситуации, когда несколько линий имеют одинаковые имена. Это происходит, если использовать функцию repeat() и включить именованные линии в список треков. Следующий пример создаёт шесть именованных линий, поочерёдно названных col-a-start и col-b-start.
.grid { display: grid; grid-gap: 20px; grid-template-columns: repeat(3, [col-a-start] 1fr [col-b-start] 2fr); }
Если при позиционировании элемента указать col-a-start, он будет помещён на первой встреченной линии с именем col-a-start (что в рассмотренном примере было бы первой линией сетки). По тому же принципу, если при позиционировании элемента указать col-b-start, он будет помещён на второй линии сетки.
При необходимости позиционирования на последующих линиях, добавьте номер после имени, чтобы указать, на какой по счёту линии с таким именем разместить элемент.
.box3 { grid-row: 2; grid-column: col-a-start 2 / col-b-start 3; }
Использовать номера линий или их имена, решать вам. Как правило, линии могут быть полезны в ситуациях, когда вы хотите изменить структуру сетки в рамках медиа-запроса. Вместо того, чтобы отслеживать, на какой линии вы размещаете элементы на разных контрольных точках, можно будет оперировать последовательно именованными линиями.
В следующем простом примере я определяю grid-колонки для узкого экрана, после чего переопределяю при ширине в 550px.
.grid { display: grid; grid-gap: 20px; grid-template-rows: [header-start] 20vh [header-end]; grid-template-columns: [full-start ] 10px [sidebar-start main-start] 1fr [main-end sidebar-end] 10px [full-end]; }
@media (min-width: 550px) { .grid { grid-template-columns: [full-start sidebar-start] 1fr 2fr [sidebar-end main-start] 1fr 2fr 1fr 2fr [main-end full-end]; } }
Именование линий:
-
Можно использовать почти любое имя (кроме ключевого слова span), однако можно использовать и область, созданную из этих линий, если их имена заканчиваются на -start и -end
-
Линии могут иметь несколько имён, заданных внутри квадратных скобок и разделённых пробелом
-
Несколько линий могут иметь одинаковое имя; если нужна определённая, просто добавьте после названия номер нужной линии по порядку