Html CSS网格-底部的空白以及如何删除它

我正试图掌握CSS网格，这是从以前使用我习惯的引导程序到现在的过渡

我创建了一个简单的布局（4行6列），但是底部有一个不需要的空白，导致了一个可见的滚动

有没有办法在不设置.container元素的确切高度的情况下解决此问题？ 当我将高度设置为.container（高度：500px）时，问题就消失了。这是绕道而行的方式吗？我不想使用一个快速修复程序，它可能会在较小或较大的视口上给我带来问题

.grid{
显示：网格；
位置：相对位置；
保证金：自动；
网格模板区域：
“导航导航导航”
“徽标”
“主要方面”
“页脚页脚页脚页脚”；
网格模板列：重复（6，1fr）；
网格模板行：50px 50px 1fr 1fr；
}
.导航{
网格区域：导航；
背景颜色：绿色；
}
.标志{
网格区域：标志；
背景颜色：鲑鱼；
}
梅因先生{
网格区域：主；
背景色：卡德蓝；
最小高度：800px；
高度：自动；
}
.这边{
网格区域：侧面；
背景颜色：浅粉色；
最小高度：800px；
高度：自动；
}
.页脚{
网格区域：页脚；
背景色：桑迪布朗；
高度：50px；
}
.重叠{
背景色：热粉红色；
网格面积：3/3/3/4；
z指数：5；
}

CSSGrid
重叠

更换

网格模板行：50px 50px 1fr 1fr

与

网格模板行：50px 50px 1fr

您基本上只是在所需行的下面添加另一组行。
替换

网格模板行：50px 50px 1fr 1fr

与

网格模板行：50px 50px 1fr

基本上，您只是在需要的行下面添加另一组行。
将
网格模板行
更改为
50px 50px 1fr
。您还可以尝试
height:fit content
将
网格模板行更改为
50px 50px 1fr
。您也可以尝试
height:fit content
因为您希望4行，其中一行占用尽可能多的空间（
1fr
），所以最后一行应该具有固定高度或设置为
auto


*{
保证金：0；
填充：0；
框大小：边框框；
}
：：之前，
：：之后{
框大小：继承；
}
.电网{
显示：网格；
位置：相对位置；
保证金：自动；
网格模板区域：“导航导航导航导航”“徽标”“主侧”“页脚页脚页脚”；
网格模板列：重复（6，1fr）；
网格模板行：50px 50px 1fr自动；
}
.导航{
网格区域：导航；
背景颜色：绿色；
}
.标志{
网格区域：标志；
背景颜色：鲑鱼；
}
梅因先生{
网格区域：主；
背景色：卡德蓝；
最小高度：800px；
高度：自动；
}
.这边{
网格区域：侧面；
背景颜色：浅粉色；
最小高度：800px；
高度：自动；
}
.页脚{
网格区域：页脚；
背景色：桑迪布朗；
高度：50px；
}
.重叠{
背景色：热粉红色；
网格面积：3/3/3/4；
z指数：5；
}

重叠
由于您希望4行，其中一行占用尽可能多的空间（
1fr
），因此最后一行应具有固定高度或设置为
auto


*{
保证金：0；
填充：0；
框大小：边框框；
}
：：之前，
：：之后{
框大小：继承；
}
.电网{
显示：网格；
位置：相对位置；
保证金：自动；
网格模板区域：“导航导航导航导航”“徽标”“主侧”“页脚页脚页脚”；
网格模板列：重复（6，1fr）；
网格模板行：50px 50px 1fr自动；
}
.导航{
网格区域：导航；
背景颜色：绿色；
}
.标志{
网格区域：标志；
背景颜色：鲑鱼；
}
梅因先生{
网格区域：主；
背景色：卡德蓝；
最小高度：800px；
高度：自动；
}
.这边{
网格区域：侧面；
背景颜色：浅粉色；
最小高度：800px；
高度：自动；
}
.页脚{
网格区域：页脚；
背景色：桑迪布朗；
高度：50px；
}
.重叠{
背景色：热粉红色；
网格面积：3/3/3/4；
z指数：5；
}

重叠
感谢您的提示，
height:fit content
解决了这个问题。第一个建议是
网格模板行：50px 50px 1fr
，但是，我有4行，所以我将跳过使用
50px 50px 1fr
，除非有人能解释为什么这个小技巧有效：d感谢提示，
height:fit content
解决了这个问题。第一个建议是
网格模板行：50px 50px 1fr
，但是，我有4行，所以我将跳过使用
50px 50px 1fr
，除非有人能解释为什么这个小技巧有效：回答的数据hanks-
网格模板行：50px 50px 1fr auto工作。我还注意到，为了让它正常工作，我必须为将最后一行设置为的元素设置一个特定的高度：
.footer{网格区域：footer；高度：50px；}
感谢您的回答-
网格模板行：50px 50px 1fr auto工作。我还注意到，为了让它正常工作，我必须为将最后一行设置为的元素设置一个特定的高度：<代码>页脚{网格区域：页脚；高度：50px；}