Макет сетки с помощью размещения на основе линий

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

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

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>

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

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

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

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

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>

.box1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 4;
}
.box2 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}
.box3 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
.box4 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
}

У нас довольно много кода для размещения каждого элемента. Неудивительно, что есть сокращение. Свойства grid-column-start и grid-column-end можно объединить в grid-column, а grid-row-start и grid-row-end — в grid-row.

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>

.box1 {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
}
.box2 {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}
.box3 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.box4 {
  grid-column: 2 / 4;
  grid-row: 3 / 4;
}

В приведенных выше примерах мы указали каждую конечную строку и столбец, чтобы продемонстрировать свойства, но на практике, если элемент занимает только одну дорожку, вы можете опустить значение grid-column-end или grid-row-end. Сетка по умолчанию занимает одну дорожку.

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

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>

.box1 {
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 4;
}
.box2 {
  grid-column-start: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}
.box3 {
  grid-column-start: 2;
  grid-row-start: 1;
}
.box4 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 3;
}

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

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>

.box1 {
  grid-column: 1;
  grid-row: 1 / 4;
}
.box2 {
  grid-column: 3;
  grid-row: 1 / 3;
}
.box3 {
  grid-column: 2;
  grid-row: 1;
}
.box4 {
  grid-column: 2 / 4;
  grid-row: 3;
}

Мы можем сделать еще один шаг и определить каждую область с помощью одного свойства – grid-area. Порядок значений для grid-area следующий.

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

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>

.box1 {
  grid-area: 1 / 1 / 4 / 2;
}
.box2 {
  grid-area: 1 / 3 / 3 / 4;
}
.box3 {
  grid-area: 1 / 2 / 2 / 3;
}
.box4 {
  grid-area: 3 / 2 / 4 / 4;
}

Этот порядок значений для grid-area может показаться несколько странным, он обратный по направлению, в котором мы, например, указываем отступы и отступы в качестве сокращения. Это может помочь осознать, что это связано с использованием сеткой направлений, относящихся к потоку, определенных в спецификации CSS Writing Modes. Мы рассмотрим, как сетки работают с режимами письма в последующих статьях, однако у нас есть понятие четырех направлений, относящихся к потоку:

• block-start
• block-end
• inline-start
• inline-end

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

При указании области сетки с помощью свойства grid-area мы сначала определяем обе начальные линии block-start и inline-start, а затем обе конечные линии block-end и inline-end. Это может показаться необычным на первый взгляд, так как мы привыкли к физическим свойствам сверху, справа, снизу и слева, но это становится более понятным, если вы начнете рассматривать веб-сайты как многонаправленные в режиме письма.

Мы также можем подсчитывать строки обратно от начала и конца сетки, для английского языка это будет правая линия столбца и последняя строка. Эти строки можно адресовать как -1, и вы можете подсчитывать оттуда — так, вторая последняя строка это -2. Стоит отметить, что последняя строка — это последняя строка явной сетки, сетки, определенной grid-template-columns и grid-template-rows, и не учитывает никакие строки или столбцы, добавленные в неявную сетку за пределами этой.

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

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>

.box1 {
  grid-column-start: -1;
  grid-column-end: -2;
  grid-row-start: -1;
  grid-row-end: -4;
}
.box2 {
  grid-column-start: -3;
  grid-column-end: -4;
  grid-row-start: -1;
  grid-row-end: -3;
}
.box3 {
  grid-column-start: -2;
  grid-column-end: -3;
  grid-row-start: -1;
  grid-row-end: -2;
}
.box4 {
  grid-column-start: -2;
  grid-column-end: -4;
  grid-row-start: -3;
  grid-row-end: -4;
}

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

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

Спецификация CSS Grid позволяет добавлять отступы между колонками и рядами с помощью свойств column-gap и row-gap. Эти свойства задают отступ, который действует примерно так же, как свойство column-gap в многоколоночной компоновке.

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

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>

.box1 {
  grid-column: 1;
  grid-row: 1 / 4;
}
.box2 {
  grid-column: 3;
  grid-row: 1 / 3;
}
.box3 {
  grid-column: 2;
  grid-row: 1;
}
.box4 {
  grid-column: 2 / 4;
  grid-row: 3;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  column-gap: 20px;
  row-gap: 1em;
}

Два свойства также можно записать в сокращенном виде, gap. Если вы зададите только одно значение для gap, оно будет применено к отступам между колонками и рядами. Если вы укажете два значения, первое будет использоваться для row-gap, а второе для column-gap.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 1em 20px;
}

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

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

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>

.box1 {
  grid-column: 1;
  grid-row: 1 / span 3;
}
.box2 {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.box3 {
  grid-column: 2;
  grid-row: 1;
}
.box4 {
  grid-column: 2 / span 2;
  grid-row: 3;
}

Вы также можете использовать ключевое слово span в значении grid-row-start/grid-row-end и grid-column-start/grid-column-end. Два следующих примера создадут одну и ту же область сетки. В первом мы устанавливаем начальную строку, а затем конечную строку, где указываем, что область должна охватывать 3 строки. Область будет начинаться с 1-й строки и заканчиваться на 4-й строке (через 3 строки).

.box1 {
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: span 3;
}

Во втором примере мы указываем конечную строку, на которой должен завершиться элемент, а затем задаем начальную строку как span 3. Это означает, что элемент должен охватывать строку сверху от указанной строки. Область будет начинаться с 4-й строки и охватывать 3 строки до 1-й.

.box1 {
  grid-column-start: 1;
  grid-row-start: span 3;
  grid-row-end: 4;
}

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

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