Question

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

在容器div中，有一个跨越21列的子div。我期待的孩子div的宽度是：

21/24 * 1002 = 876.75

添加网格间隙属性时，列的宽度减小到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;
    }

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

Answer 1

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

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

您的问题仅涉及前21列：

.column {
   grid-column: span 21;
}

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

^{Using Firefox's grid overlay tool。条纹条是排水沟。}

第一个容器

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

1002 / 24 = 41.75

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

41.75 * 21 = 876.75px

第二个容器

关于第二个容器，首先要记住的是fr单位仅代表自由空间。这是在考虑了其他尺寸之后留下的空间，包括排水沟。

7.2.3. Flexible Lengths: the fr unit

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

free space

等于可用的网格空间减去基本大小的总和   所有的网格轨道（包括排水沟）都是零。如果可供使用的话   网格空间是不确定的，自由空间也是不确定的。

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

同样重要的是要注意：grid-gap属性仅适用于网格项之间，并且永远不适用于项目和容器之间。

10.1. Gutters: the grid-column-gap, grid-row-gap, and grid-gap properties

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

因此，在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列）的代码才能使两个容器的宽度相等。 / p>

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

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

为什么网格间隙会改变CSS网格中列的宽度？

1 个答案:

第一个容器

第二个容器

解决方案