Создайте диапазон элементов сетки для последней строки/столбца

Можно ли сделать диапазон элементов сетки от первой до последней строки, когда я не знаю количество строк?

Допустим, у меня есть следующий html с неизвестным количеством ящиков.

Как я могу сделать третий сегмент .box от первой линии сетки до последней?

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
  grid-template-rows: auto [last-line];
}

.box {
  background-color: blue;
  padding: 20px;
  border: 1px solid red;
}

.box:nth-child(3) {
  background-color: yellow;
  grid-column: last-col / span 1;
  grid-row: 1 / last-line;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box">3</div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.container { display: grid; grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%; grid-template-rows: auto [last-line]; } .box { background-color: blue; padding: 20px; border: 1px solid red; } .box:nth-child(3) { background-color: yellow; grid-column: last-col / span 1; grid-row: 1 / last-line; grid-row-start: span 9000; }

<div class="container"> <div class="box"></div> <div class="box"></div> <div class="box">3</div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>

Ответ 2

Можно ли сделать диапазон элементов сетки от первой до последней строки, когда я не знаю количество строк?

Похоже, эта функция отсутствует в CSS Grid Module Level 1. Таким образом, ответ будет "нет", в настоящее время это невозможно.

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

Используйте отрицательные целые числа.

Вот два интересных раздела в спецификации CSS Grid:

7.1. Явная сетка

Числовые индексы в свойствах размещения сетки подсчитываются по краям явной сетки. Положительные индексы подсчитываются с начала, в то время как отрицательные индексы подсчитываются с конечной стороны.

и здесь...

8.3. Размещение на основе строк: свойства grid-row-start, grid-column-start, grid-row-end и grid-column-end

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

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

grid-template-rows
grid-template-columns
grid-template-areas

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

grid-column: 3 / -1;

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

Обратное будет:

grid-column: 1 / -3;

Опять же, этот метод работает только в явных сетках.

Ответ 1

Ответ 2