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

我想在“栅格库”视图中的一个特定行中设置自定义高度

.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;
}

应该是这样的：

编辑

工作笔：

我有3列，每一行

如果列的数量固定，为什么要将

auto-fit

值设置为

grid-template-columns

属性

我想添加一个具有.grid标题类的div，例如100px

如果自定义项始终位于一个位置，则可以在

网格模板行中设置此行高度：250px 250px 100px加
网格自动行：250px：

如果自定义项可以位于随机位置，则可以设置
网格自动行：100px
加上添加
网格行：span 2项的属性：
将网格容器的网格模板行定义为50px，它是100px（网格标题类）和250px（您需要的默认行大小）的倍数。每行的高度为我们定义的50像素。现在，我们可以用span 2（即50px*2）或span 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;
}

好的，我找到了解决办法。当我们想要设置网格容器中几个div的动态高度时，我们必须使用
minmax（）
函数

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

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

.item {
    height: 320px;
}

下面是一个工作示例：

感谢hisbvdis为我指出了一种找到答案的方法
你能添加最简单的html和css代码吗？我添加了问题的链接是的，你是对的，如果我想要100像素的动态div值呢？？我不想用标题手动放置div我不明白“我不想用标题手动放置div”是什么意思。我试着猜。像这样的？是的，这几乎是完美的，但现在的图像高度是：100 x 2+网格间距，若我想要290像素的图像高度和50像素的标题高度呢？你知道我想做什么吗？我不想更改图像高度并从行数（span x）开始计算，只想更改具有类标题的div请参见此示例：如何更改自定义div中的自动行高度？您是一个救生员！！