Html 使CSS网格行高度最大化以获取其内容

如何使css网格行的高度根据其内容扩展到最大值

因此，这将改变：

进入：

.grid{
显示：网格；
网格模板列：重复（3，1fr）；
栅柱间隙：20px；
轮廓：2个红色虚线；
}
.面板网格{
背景色：#f0；
轮廓：1px纯蓝色；
显示：网格；
}
.行{
背景色：#5879c5；
文本对齐：居中；
字体大小：粗体；
}
.row2{
背景色：#c5b07f；
文本对齐：居中；
字体大小：粗体；
}
.row3{
背景色：#e0ffef；
文本对齐：居中；
字体大小：粗体；
}

111
2.
3.
1.
222
3.
1.
2.
3.

我认为在浏览器支持

display:contents

或

display:subgrid

之前，这是不可能的

同时，我认为最接近的方法（不改变HTML）是跨容器的等高行。高度由每行中最高的项目设置

将此添加到您的代码中：

.panel-grid {
   display: grid;
   grid-auto-rows: 1fr; /* new */
}

这将覆盖

网格自动行：auto

默认值

.grid{
显示：网格；
网格模板列：重复（3，1fr）；
栅柱间隙：20px；
轮廓：2个红色虚线；
}
.面板网格{
背景色：#f0；
轮廓：1px纯蓝色；
显示：网格；
网格自动行：1fr；/*新建*/
}
.行{
背景色：#5879c5；
文本对齐：居中；
字体大小：粗体；
}
.row2{
背景色：#c5b07f；
文本对齐：居中；
字体大小：粗体；
}
.row3{
背景色：#e0ffef；
文本对齐：居中；
字体大小：粗体；
}

1.
1.
1.
2.
3.
1.
2.
2.
2.
3.
1.
2.
3.

如果您能够修改HTML并重新排序

行

（如下面的演示代码所示），您应该能够通过使用带有

网格自动流：行

的容器来完成类似的任务-如下所示：

.container {
  align-items: stretch;
  grid-auto-flow: row;
}

请参见下面的演示：

.container{
对齐项目：拉伸；
网格自动流：行；
}
.电网{
显示：网格；
网格模板列：重复（3，9fr）；
栅柱间隙：20px；
轮廓：2个红色虚线；
}
.面板网格{
背景色：#f0；
轮廓：1px纯蓝色；
显示：网格；
}
.行{
背景色：#5879c5；
文本对齐：居中；
字体大小：粗体；
}
.row2{
背景色：#c5b07f；
文本对齐：居中；
字体大小：粗体；
}
.row3{
背景色：#e0ffef；
文本对齐：居中；
字体大小：粗体；
}

1.
1.
1.
1.
1.
2.
2.
2.
2.
2.
3.
3.
3.

看起来不错，thnx。但是有没有办法突出显示（添加阴影覆盖）来表示视觉柱#2？这就是

面板网格
背后的原因，它有点像分组行，允许我在每个列后面添加漂亮的覆盖。@alex.mironov啊，我明白了。。。我不确定。。。让我查一下