html - 如何设置网格中一行的自定义高度？

Question

我想在网格库视图的特定行中设置自定义高度。

.grid-gallery {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-template-rows: 250px;
  grid-auto-rows: 250px;
  grid-auto-flow: dense;
}

我有 3 列，每行（我有动态的行数）有 250px 的高度。现在我想添加一个带有.grid-title类的 div 以具有例如 100px 的高度，当然这个 div 缪斯跨越 3 列以具有 100% 的网格容器宽度。

我已经尝试过这样的事情，但它不会改变 3 列的高度。即使display: grid它也不起作用。

.grid-title {
  grid-column: span 3;
  grid-template-rows: 100px;
  grid-auto-rows: 100px;
}

它应该看起来像这样：

编辑

工作笔：

https://codepen.io/freestyle09/pen/oNvGywK

标签： htmlcsssass

Answer 1

好的，我找到了解决方案。当我们想在网格容器内设置几个 div 的动态高度时，我们必须使用minmax()函数。

grid-auto-rows: minmax(50px,auto);

在此之后，我们可以手动设置网格项的高度：

.item {
    height: 320px;
}

这是工作示例： https ://codepen.io/freestyle09/pen/YzKrjrx

感谢hisbvdis为我指出找到答案的方法