Координаты грид-элементов: grid-row-start и grid-column-start, grid-column-end и grid-row-end

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

Чтобы сделать блок грид-контейнером, нужно задать ему соответствующее значение свойства display:

.container {
  display: grid;
}

Непосредственные дочерние элементы в грид-контейнере становятся его грид-элементами и далее уже располагаются согласно раскладке грида.

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

А чтобы расположить элемент внутри грида, нужно задать ему координаты. То есть как бы заставить элемент говорить:

Я — элемент грида, начинаюсь с такой-то линии столбцов и с такой-то линии рядов.

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

На примере выше ячейка начинается на 4 линии столбцов и 3 линии рядов.

В коде делается это с помощью свойств grid-column-start и grid-row-start.

Пример:

grid-column-start: 4 — элемент начинается с 4 линии столбцов.
grid-row-start: 3 — элемент начинается с 3 линии рядов.

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

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

На примере ячейка начинается на 3 линии столбцов, а заканчивается на 5 линии.

Для обозначения конца ячейки по столбцам существует свойство grid-column-end.

То есть в коде мы так и запишем:

grid-column-start: 3 — элемент начинается с 3 линии столбцов.
grid-column-end: 5 — элемент заканчивается на 5 линии столбцов.

А что если мы захотим рястянуть ячейку и по рядам тоже?

Для того чтобы мы имели такую возможность, существует свойство grid-row-end, которое работает в паре с grid-row-start и задаёт ячейке нужные нам координаты.

На примере выше ячейка начинается на 2 линии рядов, а заканчивается на 4 линии.

Код получится такой:

grid-row-start: 2 — элемент начинается со 2 линии рядов.
grid-row-end: 4 — элемент заканчивается на 4 линии рядов.

Интересной особенностью грид-ячейки является возможность начинать отсчёт её координат как от начала (первой линии ряда или столбца), так и от конца грида (последней линии ряда или столбца). Вот как это выглядит схематично:

То есть, чтобы сказать ячейке: «Начинайся на первой линии столбцов от начала и заканчивайся на первой линии столбцов с конца», нужно написать такой код:

.element {
  grid-column-start: 1;
  grid-column-end: -1;
}

Отрицательные значения grid-column-start и grid-column-end

А для того чтобы сказать ячейке: «Начинайся на первой линии столбцов с конца гридаи заканчивайся на первой линии с начала», нужно написать:

.element {
  grid-column-start: -1;
  grid-column-end: 1;
}

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

понадобятся свойства grid-row-start/grid-row-end.

Мы уже брали значение -1, давайте попробуем

что-то новенькое, например, значение -2, что будет

означать вторая линия рядов с конца грида:

В коде это будет записано так:

.element {
  grid-row-start: 1;
  grid-row-end: -2;
}

Именованные области грида: свойство grid-template-areas

Чтобы быстро описать простую сетку с помощью гридов, нужно хорошенько поорудовать свойствами grid-row-start/grid-row-end и grid-column-start/grid-column-end. Но получается несколько многословно, не правда ли?

Есть более быстрый способ создания сетки и заключается он в использовании свойств grid-template-areas и grid-area.

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

В разметке мы имеем контейнер с тремя дочерними элементами:

<div class="grid">
  <div class="grid-element-1"></div>
  <div class="grid-element-2"></div>
  <div class="grid-element-3"></div>
</div>

В CSS нам нужно описать области грида:

grid-template-areas:
  "red yellow green"
  "red yellow green"
  "red yellow green";

Cтроки в значении свойства grid-template-areas — ни что иное, как визуальное представление рядов грида, а значения в строках — представление столбцов.

О! Так теперь таким образом можно строить какие угодно по форме сетки? Увы, но нет, есть небольшое ограничение — грид должен быть прямоугольной формы, а количество объявленных столбцов в каждой строке должно быть одинаковым.

Названия областей должны начинаться с буквы и могут включать цифры и дефис.

Например, "lava lava2 lava-3" — валидное значение для grid-template-areas. Названия в строках перечисляются через один или несколько пробелов.

Разметив то, как должны располагаться ячейки в гриде с помощью grid-template-areas, мы сделали половину дела. Теперь нужно связать визуальное представление с конкретными элементами в HTML. И поможет нам в этом свойство grid-area.

Так и запишем:

grid-element-1, ты будешь соответствать области red, grid-element-2, ты будешь yellow, а ты, grid-element-3 — green.

.grid-element-1 {
  grid-area: red;
}
.grid-element-2 {
  grid-area: yellow;
}
.grid-element-3 {
  grid-area: green;
}

Обратим внимание, что название grid-area для каждого элемента должно быть уникальным. Например, если есть 6 грид-элементов, значит должно быть и 6 названий grid-area:

grid-template-areas:
  "green   green red    yellow"
  "yellow2 red2  green2 yellow"
  "yellow2 red2  green2 yellow";

А дальше для каждого элемента c первого по шестой прописывается своё название grid-area.

Одному элементу в HTML может соответствовать только одна грид-область. Если одна грид-область задана нескольким HTML-элементам, действовать будет только одно, наиболее специфичное объявление:

.grid-element-1 {
  grid-area: red; /* Грид-область назначается первому элементу */
}
.grid-element-2 {
  grid-area: red; /* Грид-область red переназначается второму элементу */
}

Свойство grid-template-areas и пустые области грида

Свойство grid-template-areas позволяет некоторые области помечать как пустые.

Для этого вместо буквенного именования области используется символ точки .

К примеру, возьмём код из прошлой теории, где был грид из трёх столбцов.

grid-template-areas:
  "red yellow green"
  "red yellow green"
  "red yellow green";

Если мы хотим, чтобы в первом ряду осталась только последняя зелёная ячейка, то заменим red и yellow в первой строке на точки:

grid-template-areas:
  ".   .      green"
  "red yellow green"
  "red yellow green";

Получается нужный нам результат:

Автоматические координаты элементов в гриде: столбцы

Окей, мы научились экономить время и использовать именованные области! Круто!

Но давайте теперь вернёмся в самое начало. В них мы имели дело с гридом фиксированной ширины 4 на 4 ячейки. Внимательные студенты наверняка заметили загадочные свойства grid-template-columns и grid-template-rows. Что же это за свойства?

Свойство grid-template-columns перечисляет количество и ширину будущих столбцов грида. К примеру, запись grid-template-columns: 100px 100px 100px; говорит гриду:

Ты будешь иметь три столбца, каждый шириной 100px.

А что же в это время происходит с рядами?

Если не задавать параметры для рядов, то их количество становится переменным. Порядок действий такой:

1. Все грид-элементы выстраиваются в один ряд согласно объявленной раскладке столбцов.
2. Если грид-элементов больше, чем столбцов, то не вписавшиеся в один ряд элементы переносятся на следующий ряд и заполняют его.
3. Новые ряды формируются до тех пор, пока все грид-элементы не будут вписаны в раскладку по столбцам. Если последний ряд заполняется элементами не полностью, то оставшееся место в гриде остаётся пустым.

Рассмотрим пример. Возьмём грид с пятью элементами, которому задан один столбец.

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

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

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

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

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

 

Нефиксированная ширина столбцов

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

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

Сейчас мы умеем задавать размеры столбцов с помощью фиксированных значений, например, вот так:

grid-template-columns: 100px 100px 100px;

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

grid-template-columns: 100px auto 100px;

Значение auto можно использовать и в определении столбцов, и в определении строк. Можно даже делать это одновременно.

Грид-интервал: свойство grid-gap

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

Разработчики спецификации гридов предусмотрели и эту возможность, придумав для нас свойство grid-gap, позволяющее добавлять равномерный интервал сразу и между рядами, и между столбцами. Определяется это свойство в px, % и других единицах измерения:

.grid {
  grid-gap: 10px;
}

Выглядят интервалы следующим образом:

Интересная особенность грид-интервалов: они не появляются между краями контейнера и крайними элементами. То есть это пустые пространства между элементами только изнутри грида.

Грид-интервал: свойства grid-row-gap и grid-column-gap

Не всегда нам необходимы одинаковые интервалы между рядами и столбцами, и в этом случае к нам на помощь приходят свойства grid-column-gap и grid-row-gap.

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

.grid {
  grid-row-gap: 20px; /* грид-интервал между рядами */
  grid-column-gap: 50px; /* грид-интервал между столбцами */
}

На самом деле с помощью свойства grid-gap тоже можно задавать интервал отдельно для столбцов и для рядов. Если задать grid-gap не одно, а два значения, первое будет определять интервал между рядами, а второе — между столбцами. Второе значение задаётся через пробел после первого:

.grid {
  /*
  грид-интервал между рядами 20px,
  грид-интервал между столбцами 50px
  */

  grid-gap: 20px 50px;
}