Html CSS网格布局：调整大小时保持水平和垂直排水沟大小相等

我想做什么：我尝试使用CSS网格布局实现页面。全尺寸时，垂直和水平排水沟应为20px。但如果它必须做出反应的话。准确地说，我希望水平边沟的大小与垂直边沟的大小相同，以保持图片之间的边距比相同

我的问题：我尝试了几种方法来实现这一点。在下面的代码中，我使用了1.25em。为什么？我的假设是，由于基本字体大小默认为16px，所以我认为1.25em（20px）应该可以做到这一点。但它不起作用。。。我找不到另一种方法来获得想要的行为。你能帮我指路吗

.wrapper{
最大宽度：1420px；
边距：0自动0自动；
显示：网格；
网格模板列：自动；
网格模板行：自动；
}   
身材{
保证金：0；
填充：0；
}
img{
最大宽度：100%；
高度：自动；
显示：块；
左边距：自动；
右边距：自动；
}
/*第一节*/
.宽{
显示：网格；
网格模板列：100%；/*1420px*/
网格模板行：自动1.25em；
}
.宽a{
网格柱：1/2；
网格行：1/2；
}
/*第二节*/
.沉着{
显示：网格；
网格模板列：49.295774647%1.408450704%49.295774647%；
网格模板行：自动1.25em自动1.25em；
}
.a{
网格柱：1/2；
网格行：1/4；
}
.b-b{
网格柱：3/4；
网格行：1/2；
}
.c-c{
网格柱：3/4；
网格行：3/4；
}

---

使用视口百分比单位，而不是像素单位。大概是这样的：

grid-gap: 10vmin

.wrapper{
显示：网格；
网格模板列：自动；
网格模板行：自动；
保证金：0自动；
边框：1px纯黑；
高度：100vh；
电网间隙：10vmin；/*新*/
}
.宽{
显示：网格；
网格模板列：100%；
网格模板行：自动1.25em；
边框：1px红色虚线；
电网间隙：10vmin；/*新*/
}
.沉着{
显示：网格；
网格模板列：49.295774647%1.408450704%49.295774647%；
网格模板行：自动1.25em；
边框：1px蓝色虚线；
}
.a{
网格柱：1/2；
网格行：1/4；
背景颜色：橙色；
}
.b-b{
网格柱：3/4；
网格行：1/2；
背景色：浅绿色；
}
.c-c{
网格柱：3/4；
网格行：3/4；
背景颜色：浅绿色；
}
身材{
保证金：0；
填充：0；
}
img{
最大宽度：100%；
高度：自动；
显示：块；
左边距：自动；
右边距：自动；
}
身体{
保证金：0；
}
* {
框大小：边框框；
}

您是否愿意使用砌体？我发现它比CSS网格更容易。是的，砌石可以是一种选择，没问题。今天我写这篇文章是为了另一件相关的事情。你可能觉得它有用，也可能不有用。请添加占位符图像，以便我们可以看到完整的MCVE？TylerH添加了占位符，并在此过程中学习了一个新的首字母缩略词！我尝试使用您的解决方案，但实际上看不到使用vmin将如何保持水平和垂直排水沟相等。你的意思是用vmin值而不是实际百分比来替换两个图像之间的边沟列吗？可能我误解了你的问题。当你写这篇文章时：“我希望水平排水沟的大小与垂直排水沟的大小相同。”我解释说，这意味着你希望排水沟与屏幕大小成比例。也许当时我的问题表达得不够精确。我想要的是，无论页面大小如何，水平和垂直水槽总是完全相等。那么为什么不在容器上使用网格间距：20px呢？这将在所有屏幕尺寸下保持垂直和水平方向上完全相等的排水沟。