列和行的CSS网格间隙大小不同答案

【问题标题】：CSS Grid gap not the same size for column and row列和行的CSS网格间隙大小不同
【发布时间】：2020-09-07 09:57:52
【问题描述】：

我有以下元素：

<body>
    <div class="parent">
        <div class="grid">
            <!--...-->
        </div>
    </div>
</body>

.parent {
    margin: 30px 30px 0 30px;
    display: block;
}

.grid {
    display: grid;
    grid-template-rows: 55% 45%;
    grid-template-columns: 20% 48% 30%;
    gap: 1%;
}

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

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

有没有办法让行间距和列间距一样大？

【问题讨论】：

也许1vw 两者兼得？
stackoverflow.com/a/36506926/3597276
虽然这是一种有趣的方法，但vw 是否基于父元素的元素大小或总屏幕大小工作？来自 w3 学校："vw: Relative to 1% of the width of the viewport"
如果您的网格是全屏的，那么您将获得几乎相同的结果。如果不分享您的完整代码
不是，而是全尺寸减去 60 像素

标签： html css css-grid

【解决方案1】：

首先，最好使用fr 而不是百分比，然后您可以依赖vw 单位，如下所示：

.parent {
  margin: 30px 30px 0 30px;
  display: block;
}

.grid {
  display: grid;
  border: 1px solid;
  grid-template-rows: 55fr 45fr;
  grid-template-columns: 20fr 48fr 30fr;
  grid-gap: calc((100vw - 60px)/100);
}

.grid>div {
  min-height: 100px;
  height:100%;
  background: red;
}

<div class="parent">
  <div class="grid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  below to compare
  <div class="grid" style="grid-gap:1%;">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

【讨论】：

【解决方案2】：

尝试使用 rem 单位。例如 gap: 2rem; 这将使行和列的大小都等于根元素的字体大小。

【讨论】：