Html 在动态高度网格中将行调整为内容高度

我想创建一个带有CSS网格布局的网页

我面临一个关于行的高度的问题

我希望每行的高度根据内容进行调整

现在高度是静态的。如果没有内容，则会显示大量可用空间。有办法解决这个问题吗

我想要这些截图中的结果：

也

body，
html{
身高：100%；
保证金：0；
填充：0；
字体系列：arial；
}
.包装纸{
身高：100%；
显示：网格；
网格模板行：40px自动40px；
网格模板区域：“页眉”“内容”“页脚”“页脚”；
网格间距：5px；
}
标题{
网格区域：标题；
背景色：黑色；
颜色：白色；
填充：10px；
}
页脚{
网格区域：页脚；
背景色：黑色；
颜色：白色；
填充：10px；
}
.集装箱{
网格区域：内容；
显示：网格；
网格模板列：820px 1fr；
网格模板行：480px 213px；
网格间距：5px；
填充：0 5px；
}
.第1项{
颜色：#fff；
文本对齐：居中；
填充：10px；
背景色：#009036；
网格面积：1/span 1/1/span 1；
}
.表格项目2{
颜色：#fff；
文本对齐：居中；
填充：10px；
背景色：#772164；
网格面积：2/span 1/2/span 1；
}
.表格项目3{
颜色：#fff；
文本对齐：居中；
背景色：#C91B18；
网格面积：1/2/span 3/span 3；
}

标题
此行高度与数据相符

Lorem ipsum door sit amet，一位杰出的领导者，他在劳动和生活中的时间是有限的。但是，我们必须尽可能少地进行实验，因为我们的实验室是不合格的
ex ea commodo consequat。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
此行高度与数据相符

Lorem ipsum door sit amet，一位杰出的领导者，他在劳动和生活中的时间是有限的。但是，我们必须尽可能少地进行实验，因为我们的实验室是不合格的
ex ea commodo consequat。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
3.
页脚

对于两个内容项，每行使用。这将根据一个值调整每行的大小

若要指定右列的全高，请添加一个空的

正文{
边距：0；字体系列：arial；
}
*{框大小：边框框；}
.包装纸{
高度：100vh；
显示：网格；
网格模板行：40px 1fr 40px；
网格间距：5px；
网格模板区域：“标题”
“内容”
“页脚”；
}
标题{
网格区域：标题；
背景色：黑色；
颜色：白色；
填充：10px；
}
页脚{
网格区域：页脚；
背景色：黑色；
颜色：白色；
填充：10px；
}
.集装箱{
网格区域：内容；
显示：网格；
网格模板列：820px 1fr；
网格模板行：最小内容最小内容；/*收缩以适应*/
网格间距：5px；
填充：0 5px；
网格模板区域：“绿-红”
“紫红色”
“.red”；/*隐式行；表示红色的全高*/
}
.第1项{
网格区域：绿色；
颜色：#fff；
文本对齐：居中；
填充：10px；
背景色：#009036；
}
.表格项目2{
网格区域：紫色；
颜色：#fff；
文本对齐：居中；
填充：10px；
背景色：#772164；
}
.表格项目3{
网格区域：红色；
颜色：#fff；
文本对齐：居中；
背景色：#C91B18；
}

标题
此行高度与数据相符。



知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车
这是一种不受欢迎的行为，它是一种不受欢迎的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
此行高度与数据相符。



知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车
这是一种不受欢迎的行为，它是一种不受欢迎的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
3.
页脚

Hello@Michael，我面临一个问题。如果两行都有可滚动内容，则第2列（红色列）底部与第2行底部不对齐。请看图片（）。敬请推荐。@DeepakMuduli，你能发布一个演示吗？也许是一个代码笔或JSFIDLE，这样我就可以看到整个问题了。请看我的演示。您能帮助我吗？第一列底部的额外空间是由容器上的

网格间隙：5px

造成的。这是因为每列中有三行。当

grid-item-1

和

grid-item-2

占用所有空间时，第三行将折叠。但是第二行（紫色）和第三行（空）之间的

网格间距

仍然存在…请删除

网格间距

。仅使用格线柱间隙。然后在第一行（绿色）和第二行（紫色）之间使用

margin

。