Html 如何在网格布局中设置响应间隙

我正在尝试创建一个具有响应的、彩色间隙的响应网格布局，其中间隙大小与父容器的宽度成比例。问题是垂直间隙没有到达网格的底部

我已经创建了一个网格容器，在其中我设置了以%为单位的间距大小和间距的背景色（请参见下面的代码和）。 如果在px中设置固定的间隙大小，则不会出现问题

.container{
显示：网格；
网格模板柱：1fr 1fr；
网格间距：10%；
背景色：黑色；
}
图{
垫底：100%；
背景尺寸：包含；
背景重复：无重复；
背景图片：url(https://via.placeholder.com/512);
}

正文{
身高：100%；
}
.集装箱{
显示：网格；
网格模板柱：1fr 1fr；
网格间距：10%；
背景色：黑色；
垫底：9%；
}
图{
垫底：100%；
背景尺寸：包含；
背景重复：无重复；
背景图片：url(https://via.placeholder.com/512);
}

这个问题解释了问题发生的原因。它帮助我找到了以下解决方案：

不要设置网格间距，而是分别设置网格列间距和网格行间距，使网格行间距等于网格列间距/（1-网格列间距）

将容器底部的填充设置为等于网格柱间距

例如：如果栅格列间距为0.1（10%），则栅格行间距为0.1/（1-0.1）或0.1111（11.1%）

这适用于轴网柱间隙的任何百分比值

.container{
显示：网格；
网格模板柱：1fr 1fr；
栅柱间隙：10%；
网格行间距：11.1%；
垫底：10%；
背景色：黑色；
}
图{
垫底：100%；
背景尺寸：包含；
背景重复：无重复；
背景图片：url(https://via.placeholder.com/512);
}

非常感谢您的及时回复。我试过你的解决方案，效果很好。它甚至可以在没有添加到CSS中的主体{}的情况下工作。但是为什么要用9%填充底部呢？如果间隙大小有其他百分比值怎么办？可能重复