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

Question

我有一个 1 列 10 行的 CSS 网格。单元格包含长度不同的文本。我希望所有行的最小高度为 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>