为什么 grid-gap 会改变 CSS Grid 中列的宽度？

使用 css-grid，我在容器内设置了一个 1002px 宽的 24 列网格。

在容器 div 内，有一个跨 21 列的子 div。我期望子 div 的宽度是：

21/24 * 1002 = 876.75

当添加 grid-gap 属性时，列的宽度减小到 873px，这是不希望的。

如何编写 CSS 以使 div 的宽度为 876.75px？

参见示例：https://codepen.io/edtalmadge/pen/MvLrqW?editors=1100 https://codepen.io/edtalmadge/pen/MvLrqW?editors=1100

HTML

<div class="container1">
  <div class="column">
    <p>No grid-gap ...width is 876px as expected</p>
  </div>
</div>

<div class="container2">
  <div class="column">
    <p>grid-gap: 30px; ...width becomes 873px (3px too narrow)</p>
  </div>
</div>

CSS

   /* no grid gap */
   .container1 {
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      width: 1002px;
      background-color: #ededed;
    }

    /* has grid gap */
    .container2 {
      grid-gap: 30px; // This causes the width of .column to increase
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      width: 1002px;
      background-color: #ededed;
    }

    .column {
      grid-column: span 21;
      background-color: gray;
    }

.container1 {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  width: 1002px;
  background-color: #ededed;
}

.container2 {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  width: 1002px;
  background-color: #ededed;
  grid-gap: 30px;
  border-top: 1px solid yellow;
}

.column {
  grid-column: span 21;
  background-color: gray;
}

p {
  text-align: center;
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
}

<div class="container1">
  <div class="column">
    <p>No grid-gap ...width is <strong style="color: lime;">876px</strong> as expected</p>
  </div>
</div>

<div class="container2">
  <div class="column">
    <p>grid-gap: 30px; ...width becomes <strong style="color: #fb665e;">873px</strong> (3px too narrow)</p>
  </div>
</div>

两个网格容器都有 24 列，宽度为 1002px：

grid-template-columns: repeat(24, 1fr);
width: 1002px

您的问题仅涉及前 21 列：

.column {
   grid-column: span 21;
}

这意味着最后三列和网格间隙应从计算中排除。

^{Using Firefox's grid overlay tool https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts. The striped bars are the gutters.}

第一个集装箱

在第一个容器中，没有排水沟，每个fr单位等于 41.75px。

1002 / 24 = 41.75

这意味着 21 列等于 876.75 像素的宽度。

41.75 * 21 = 876.75px

第二个容器

关于第二个容器，首先要记住的是fr单位仅代表可用空间。这是考虑其他尺寸后剩下的空间，包括排水沟.

7.2.3.灵活的长度：fr unit https://www.w3.org/TR/css3-grid-layout/#valdef-flex-fr

灵活的长度或<flex>是一个维度fr单位，代表一部分可用空间在网格容器中。

可用空间 https://www.w3.org/TR/css3-grid-layout/#free-space

等于可用网格空间减去基本尺寸的总和 所有网格轨道（包括排水沟），都归零。如果可供使用的话 网格空间是无限的，自由空间也是无限的。

在第一个容器中，所有空间都是可用空间。在第二个容器中则不然。

另外值得注意的是：grid-gap属性仅适用于网格项目之间，而不适用于项目和容器之间。

10.1.排水沟：grid-column-gap, grid-row-gap, and grid-gap特性 https://www.w3.org/TR/css3-grid-layout/#gutters

这些属性指定网格行和网格之间的间距 列，分别。

因此，在 24 列的网格中，有 23 个装订线（见上图）。

因此，对于第二个容器，我们必须首先减去排水沟所占用的空间：

1002 - (30 * 23) = 312

我们现在知道第二个容器中的可用空间是 312px。

现在我们需要确定每个的值fr unit.

312 / 24 = 13

So each fr单位等于13px。

现在我们需要计算 21 列的装订线和 fr 的总宽度：

21 * 13 = 273px (total width of free space)
20 * 30 = 600px (total width of gutters)
          -----
          873px

或者你可以直接减去三fr总宽度中的单位和三个装订线：

1002px - (13 * 3) - (30 * 3) = 873px

Solution

由于您正在使用fr由于建立长度的单位以及容器之间的可用空间量不同，因此您的代码只能在全宽（24 列）下为两个容器实现相同的宽度。

要在小于全宽的情况下实现相等宽度，您需要使用不同的调整大小方法，例如px or em，对于列。

根据您的总体目标，可能还有其他解决方案。