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

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，例如高度为100像素，当然该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

Answer 1

  

我有3列，每行

如果列数固定，为什么将auto-fit的值设置为grid-template-columns属性？

  

我想添加一个带有.grid-title类的div以具有例如100px

如果自定义项目始终位于一个位置，则可以在grid-template-rows: 250px 250px 100px;加grid-auto-rows: 250px;：https://codepen.io/hisbvdis/pen/wvwrXye

中设置此行高

如果自定义项目可以放在随机位置，则可以设置grid-auto-rows: 100px并为项目添加grid-rows: span 2;属性：https://codepen.io/hisbvdis/pen/vYBerjL

Answer 2

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

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

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

.item {
    height: 320px;
}

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

感谢 hisbvdis ，为我提供了寻找答案的方法

Answer 3

将网格容器的网格模板行定义为50px，这是100 px（网格标题类）和250px（您需要的默认行大小）的倍数。根据我们的定义，每行的高度为50像素。现在，我们可以覆盖跨度为2（即50px * 2）或跨度5（即50px * 5）的独立类，这将为这些类提供100 px和250 px的高度。在符合您条件的CSS属性下面检查我的。

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

.grid-gallery > div{
  background-color: red;
}

.grid-gallery .grid-title {
  background-color: yellow;
  grid-column: span 3;
  grid-row: span 2;
/*  Here some rules  */
}
.image-gallery {
  grid-row: span 5;
}