Css 定义网格的高度，而不是按所有列

我创建了一个由3列4行组成的网格。最后一列被图像（».box image«，而不是背景图像）完全覆盖，因此此图像及其所在列不应延伸其他列的高度

.grid{
    display: grid;
    grid-template-columns: 25% 25% 1fr;
    grid-template-rows: auto 1fr 1fr 50px;
}

---

如何确定.box图像不会增加网格的高度（1fr 1fr），而只假设由其他内容确定的高度

您只需在图像中添加一个

max height

。请参见下面两个具有不同行高的示例。在这两种情况下，图像都会根据其他行的高度填充高度

.grid{
显示：网格；
网格模板列：重复（2,25%）4fr；
网格模板行：自动1fr 1fr 50px；
}
.grid>div{
背景颜色：浅灰色；
边框：1px纯色灰色；
}
.grid.box图像{
网格柱：3；
网格行：1/5；
}
.grid.box图像img{
对象匹配：覆盖；
宽度：100%；
最大高度：100%；
}

1.
2.
4.
5.
6.
7.
8.
9

这是否回答了您的问题？不幸的是，没有。有人试图使网格假定图像的高度（100%）。我希望带有图像（.box图像）的列假定其余列的高度。请最好将您的HTML包含为一个值。不幸的是，这不是重点。对于栅格的总体高度，图像的高度应该不重要。假设在Div 4和Div 5中是文本内容，这增加了网格的高度，那么图像的高度也应该扩大。反之亦然。如果你看第二个演示，你会看到图像的高度调整到网格大小。图像实际上是1000x1000px，但它被折叠到网格行的高度。但是如果从网格中删除图片，框的高度（4-7）也会更低。不，它的大小相同。我添加了另一个片段，显示了没有图像的相同标记，您可以看到网格仍然是相同的大小，图像将进行调整以填充4行的高度，因为图像跨越所有4行。

.grid .box-image{
    grid-column: 3;
    grid-row: 1 / 5;
}

.grid .box-image img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}