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

Ответ 1

Вы можете добавить grid-row-start к этим окнам css и установить его для охвата абсурдно большого числа.

.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;

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