为什么网格间距内的百分比值会在CSS网格中产生溢出？

我想要一个这样的网格：

.grid{
显示：网格；
网格间距：50%；
背景颜色：蓝色；
}
.grid-1{
背景色：红色；
}

测试
测试
测试
 最初，我们不能解决网格间隙的百分比，因为它依赖于高度，所以我们忽略它（我们把它看作是<代码> Audio<代码>）。浏览器首先计算高度，并考虑以下内容：


console.log（document.querySelector（'.grid'）.offsetHeight）
.grid{
显示：网格；
背景颜色：蓝色；
}
.grid-1{
背景色：红色；
不透明度：0.5；
}

测试
测试
测试
 最初，我们不能解决网格间隙的百分比，因为它依赖于高度，所以我们忽略它（我们把它看作是<代码> Audio<代码>）。浏览器首先计算高度，并考虑以下内容：


console.log（document.querySelector（'.grid'）.offsetHeight）
.grid{
显示：网格；
背景颜色：蓝色；
}
.grid-1{
背景色：红色；
不透明度：0.5；
}

测试
测试
测试
谢谢你的回答我有两点1。50%网格间距是指行高和列宽之和的50%，之后可以轻松计算总高度2。我讨厌px值，因为它们没有响应能力。有没有可能解决这个问题？@MarkusSchneider没有，你有一个循环，对你来说似乎很容易，但事实并非如此：想象你有一个元素a，其高度由元素B定义，元素B的高度由高度a的百分比定义。这里就是这种情况，网格是A，间隙是B。我们首先定义A的高度，然后定义B。如果我们重新定义A，我们必须重新定义B，依此类推。它永远不会结束。。。正如我说的，你需要问自己“占什么百分比？”即使你也不能回答这个问题。你能告诉我什么的百分比吗？我会这样计算：高度行1+高度行2+高度行3+0,5*（3-1）*（高度行1+高度行2+高度行3）=网格高度。所以对我来说，它计算的是行高，而不是网格，而不是间距，我会计算行高，间距，grid@MarkusSchneider你希望计算结果是这样的：）你认为应该是这样，但不是这样。计算如下：（1）我们无法解析网格间距，因为它的百分比，我们移动（2）我们计算网格的高度（在这种情况下，它是3行的总和，但它可以是其他的，取决于其他属性）（3）现在我们有了网格的高度，我们可以解析网格间距（4）我们添加网格间距（5）我们有溢流，我们停下来。这个案例看起来很简单，但请检查我共享的链接，看看其他情况下更容易complex@MarkusSchneider不要忘记，我们可以使用边距、填充等，而且浏览器可以根据需要进行计算。栅格间距也是栅格高度的一部分。当使用像素值时，您可以清楚地注意到这一点，因此网格高度不仅是行，而且是间距、边距、填充等。感谢您的回答，我有两点1。50%网格间距是指行高和列宽之和的50%，之后可以轻松计算总高度2。我讨厌px值，因为它们没有响应能力。有没有可能解决这个问题？@MarkusSchneider没有，你有一个循环，对你来说似乎很容易，但事实并非如此：想象你有一个元素a，其高度由元素B定义，元素B的高度由高度a的百分比定义。这里就是这种情况，网格是A，间隙是B。我们首先定义A的高度，然后定义B。如果我们重新定义A，我们必须重新定义B，依此类推。它永远不会结束。。。正如我说的，你需要问自己“占什么百分比？”即使你也不能回答这个问题。你能告诉我什么的百分比吗？我会这样计算：高度行1+高度行2+高度行3+0,5*（3-1）*（高度行1+高度行2+高度行3）=网格高度。所以对我来说，它计算的是行高，而不是网格，而不是间距，我会计算行高，间距，grid@MarkusSchneider你希望计算结果是这样的：）你认为应该是这样，但不是这样。计算如下：（1）我们无法解析网格间距，因为它的百分比，我们移动（2）我们计算网格的高度（在这种情况下，它是3行的总和，但它可以是其他的，取决于其他属性）（3）现在我们有了网格的高度，我们可以解析网格间距（4）我们添加网格间距（5）我们有溢流，我们停下来。这个案例看起来很简单，但请检查我共享的链接，看看其他情况下更容易complex@MarkusSchneider不要忘记，我们可以使用边距、填充等，而且浏览器可以根据需要进行计算。栅格间距也是栅格高度的一部分。当使用像素值时，您可以清楚地注意到这一点，因此网格高度不仅是行，而且是间距、边距、填充等。