如何使用max函数调整CSS网格行的高度？

Question

我有一个CSS网格，具有1列和10行。单元格包含长度不同的文本。我希望所有行的最小高度都为100vh，并在必要时超出该大小，即，如果内容溢出。

因此，我尝试使用max函数，但我猜它无法处理“ auto”值：

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

当我用min-content或类似的表达式替换auto时，也会发生同样的情况。

是否有一种方法可以使上述语法的语法正确无误？

非常感谢！

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>