Html CSS网格间距列和行的大小不同

我有以下几点：

.parent{
利润率：30px 30px 0 30px；
显示：块；
}
.电网{
显示：网格；
网格模板行：55%45%；
网格模板列：20%48%30%；
差距：1%；
}

如您所见，单元的大小基于父元素大小（百分比大小），间隙大小也是如此

问题是，虽然列间距大小正是我想要的，但行间距非常小。 我知道这是因为间距等于父元素高度的1%，但我希望它的大小与列间距相同

---

有没有办法使行间距与列间距相同？

尝试使用rem单元。例如，间隙：2rem；

---

这将使行和列的大小都等于根元素的字体大小。

首先，最好使用

fr

而不是百分比，然后您可以使用

vw

单位，如下所示：

.parent{
利润率：30px 30px 0 30px；
显示：块；
}
.电网{
显示：网格；
边框：1px实心；
网格模板行：55fr 45fr；
网格模板柱：20fr 48fr 30fr；
网格间距：计算（（100vw-60px）/100）；
}
.grid>div{
最小高度：100px；
身高：100%；
背景：红色；
}

下面比较一下

可能

1vw

两者都适用？虽然这是一种有趣的方法，但

vw

是否根据父元素的大小或总屏幕大小工作？来自w3学校：如果你的网格是全屏的，那么你将得到几乎相同的结果。如果不分享你的完整代码，它不是，但它大约是完整大小减去60像素