Грид-разметка CSS: ключевое слово span

Development | Amber | Комментировать запись

Если вы помещаете элементы в родительскую сетку с помощью grid-column или grid-row, вы можете использовать ключевое слово span, чтобы не указывать конечные грид-линии, когда элементы должны охватывать более одного столбца или строки.

Предположим, у нас есть следующее правило CSS для элемента сетки, который охватывает 3 столбца и 2 строки:

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

Вместо него мы можем использовать ключевое слово span. Делается это следующим образом:

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

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

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

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

.item {
  grid-column: col 2 / col 7;
  grid-row: content 6 / content 10;
}

Элемент начинается в столбце со второй строкой по имени col и заканчивается на 7-й строке, которая также называется col. Точно так же он начинается на 6-й строке по имени row и заканчивается на 10-й строке с таким же именем.

Здесь также можно использовать span, и вот как это будет выглядеть:

.item {
  grid-column: col 2 / span col 5;
  grid-row: content 6 / span content 4;
}

Ключевое слово span также можно использовать вместе со свойством grid-area. К примеру, если мы хотим автоматически разместить элемент, но охватывал заданное количество строк и столбцов, мы можем использовать:

.item {
  grid-area: span 6 / span 4;
}

Читайте также: Грид-разметка CSS: как работает нотация repeat