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

Question

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

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

21/24 * 1002 = 876.75

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

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

参见示例：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;
    }

21/24 * 1002 = 876.75

<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>

Answer 1

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

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

您的问题仅涉及前21列：

.column {
   grid-column: span 21;
}

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

^{使用Firefox的网格覆盖工具。条纹条是装订线。}

第一个容器

在第一个没有fr装订线的容器中，每个单位等于41.75px。

1002 / 24 = 41.75

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

41.75 * 21 = 876.75px

第二容器

关于第二个容器，要记住的第一件事是该fr单元仅代表自由空间。那就是在考虑其他尺寸（包括檐槽）之后剩下的空间。

7.2.3。弹性长度：fr单位

柔性长度或单位<flex>尺寸fr，表示网格容器中自由空间的一部分。

可用空间

等于可用网格空间减去所有网格轨道（包括装订线）的基本尺寸之和，以零为底。如果可用网格空间是不确定的，则可用空间也是不确定的。

在第一个容器中，所有空间都是自由空间。在第二个容器中不是这样。

还要注意的重要一点：该grid-gap属性仅适用于网格项目之间，而不适用于项目与容器之间。

10.1。排水沟：对grid-column-gap，grid-row-gap和 grid-gap 性质

这些属性分别指定网格行和网格列之间的装订线。

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

因此，对于第二个容器，我们必须首先减去装订线占用的空间：

1002 - (30 * 23) = 312

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

现在我们需要确定每个fr单位的价值。

312 / 24 = 13

因此，每个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

解

由于您使用fr单位来确定长度，并且容器之间的可用空间量也不同，因此您的代码只能在全宽度（24列）下实现两个容器的相等宽度。

要获得小于全宽的相等宽度，您需要对列使用其他大小调整方法，例如px或em。

可能还有其他解决方案，具体取决于您的总体目标。