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

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

К счастью, понять эту концепцию несложно. В основном всё сводится к линиям сетки.

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

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

Элементы сетки

В приведённом выше примере первый элемент сетки начинается с линии строки 1 и линии столбца 1. Он заканчивается на линии строки 2 и линии столбца 2. Второй элемент сетки начинается с линии строки 3 и линии столбца 2. Он заканчивается на линии строки 4 и линии столбца 4.

Это можно сделать с помощью следующего кода:

#item1 {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 2;
  grid-column-end: 2;
}

#item2 {
  grid-row-start: 3;
  grid-column-start: 2;
  grid-row-end: 4;
  grid-column-end: 4; 
}

Вот рабочий пример:

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

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

Именованные линии сетки

Вы также можете придумать собственные имена для этих линий сетки, чтобы было проще на них ссылаться. Их можно именовать с помощью свойств grid-template-rows и grid-template-columns. Например:

#grid {
  display: grid;
  /* Устанавливаем дорожки и имена линий */
  grid-template-rows: [row1-start] 50px [row2-start] 1fr [row3-start] 80px [row3-end];
  grid-template-columns: [col1-start] 120px [col2-start] 1fr [col3-start] 80px [col3-end];
  grid-gap: 5px;
  height: 90vh;
}

…

/* Теперь ссылаемся на эти именованные линии */
#item2 {
grid-row-start: row3-start;
grid-column-start: col2-start;
grid-row-end: row3-end;
grid-column-end: col3-end; 
}

Именованные линии могут быть явными или неявными. Неявные именованные линии добавляются при создании именованных областей сетки с помощью свойства grid-template-areas. Имя берётся из области сетки с добавлением -start или -end (в зависимости от того, начальная это линия или конечная).

К примеру, для области сетки с именем header создаются четыре неявные именованные линии. Две из них с именем header-start обозначают начало строки и столбца именованной области сетки, а две с именем header-end — конец строки и столбца.

Именованные области сетки

Область сетки может быть названа явно с помощью свойства grid-template-areas контейнера сетки. Именно так мы поступали ранее, когда создавали макет сайта.

Если кратко, то это выглядит следующим образом:

#grid { 
  display: grid;
  /* Имена областей сетки */
  grid-template-areas: 
    "a a"
    "b c";
    …
}

…

/* Теперь применяем каждый элемент сетки к
именованной области сетки */
#a {
  grid-area: a;
}
#b {
  grid-area: b;
}
#c { 
  grid-area: c; 
}

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

Например:

grid-template-areas: 
  "a a"
  ". b";

Или:

grid-template-areas: 
  "header header"
  "... content";

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

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

grid-area

Это свойство является сокращением для следующих свойств:

grid-column

Это свойство является сокращением для следующих свойств:

grid-column-start

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

grid-column-end

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

grid-row

Это свойство является сокращением для следующих свойств:

grid-row-start

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

grid-row-end

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

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

Гриды и направление письма

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