Как отрегулировать высоту строки сетки CSS с помощью функции max?

Question

У меня есть сетка CSS с 1 столбцом и 10 строками. Ячейки содержат текст различной длины. Я хочу, чтобы все строки имели минимальную высоту 100vh и превышали этот размер при необходимости, т.е. если содержимое переполняется.

Итак, я попытался использовать такую ​​функцию max, но я думаю, она не может справиться с Значение "auto":

grid-template-rows: repeat(10, max(auto, 100vh))

То же самое происходит, когда я заменяю auto на min-content или аналогичные выражения.

Есть ли способ исправить синтаксис за логи c объяснено выше?

Заранее большое спасибо!

Answer 1

Используйте grid-auto-rows:minmax(100vh,1fr)

body {
  margin:0;
}
.container {
  display:grid;
  grid-auto-rows:minmax(100vh,1fr);
}
.container > * {
  border:2px solid;
}

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

И с дополнительным содержанием:

body {
  margin:0;
}
.container {
  display:grid;
  grid-auto-rows:minmax(100vh,1fr);
}
.container > * {
  border:2px solid;
  font-size:50px;
  padding:50px;
}

<div class="container">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus iaculis felis, nec molestie augue porta et. Vestibulum condimentum, dui sed rutrum vulputate, dolor est volutpat urna, ut consequat diam purus eu justo. Quisque fringilla aliquet risus, vitae feugiat lectus venenatis nec</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus iaculis felis, nec molestie augue porta et. Vestibulum condimentum, dui sed rutrum vulputate, dolor est volutpat urna, ut consequat diam purus eu justo. Quisque fringilla aliquet risus, vitae feugiat lectus venenatis nec</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus iaculis felis, nec molestie augue porta et. Vestibulum condimentum, dui sed rutrum vulputate, dolor est volutpat urna, ut consequat diam purus eu justo. Quisque fringilla aliquet risus, vitae feugiat lectus venenatis nec</div>
</div>

Или как показано ниже, если вам не нужна строка с одинаковой высотой:

body {
  margin:0;
}
.container {
  display:grid;
  grid-auto-rows:minmax(100vh,max-content);
}
.container > * {
  border:2px solid;
  font-size:50px;
  padding:50px;
}

<div class="container">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus iaculis felis, nec molestie augue porta et. Vestibulum condimentum, dui sed rutrum vulputate, dolor est volutpat urna, ut consequat diam purus eu justo. Quisque fringilla aliquet risus, vitae feugiat lectus venenatis nec</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus iaculis felis, nec molestie augue porta et. Vestibulum condimentum, dui sed rutrum vulputate, dolor est volutpat urna, ut consequat diam purus eu justo. Quisque fringilla aliquet risus, vitae feugiat lectus venenatis nec</div>
<div>Lorem ipsum dolor sit ame)</div>
</div>