为什么grid-gap会更改CSS Grid中列的宽度？ [英] Why does grid-gap change a column's width in CSS Grid?

问题描述

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

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

  21/24 * 1002 = 876.75 
  

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

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

请参见示例：
< a href = https://codepen.io/edtalmadge/pen/MvLrqW?editors=1100 rel = nofollow noreferrer> https://codepen.io/edtalmadge/pen/MvLrqW?editors=1100

HTML

 < div class = container1> 
< div class = column> 
< p>没有网格间隙...宽度为876px，如预期
< / div> 
< / div> 
 
< div class = container2> 
< div class = column> 
< p>网格间距：30px； ...宽度变为873px（3px太窄）/ p 
< / div> 
< / div> 
  

CSS

  / *无网格间隙* / 
 .container1 {
 display：grid; 
 grid-template-columns：repeat（24，1fr）; 
宽度：1002px； 
 background-color：#eded; 
} 
 
 / *具有网格间隙* / 
 .container2 {
 grid-gap：30px; //这会导致.column的宽度增加
 display：grid; 
 grid-template-columns：repeat（24，1fr）; 
宽度：1002px； 
 background-color：#eded; 
} 
 
 .column {
 grid-column：span 21; 
 background-color：灰色； 
} 
  

  .container1 {display：grid; grid-template-columns：repeat（24，1fr）;宽度：1002px；背景颜色：#ededed;}。container2 {display：grid; grid-template-columns：repeat（24，1fr）;宽度：1002px；背景颜色：#eded; grid-gap：30px; border-top：1像素黄色；}。column {grid-column：span 21;背景颜色：灰色；} p {文本对齐：居中；颜色：#fff;字体家族：Helvetica，Arial和sans-serif；}  

 < div class = container1> < div class = column> < p>没有网格间隙...宽度是< strong style = color：青柠;> 876px< / strong>如预期的/ p < / div>< / div>< div class = container2> < div class = column> < p>网格间隙：30px； ... width变为< strong style = color：＃fb665e;> 873px< / strong> （3px太窄）< p < / div>< / div>  

解决方案

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

  grid-template-columns：重复（24，1fr）; 
宽度：1002px 
  

您的问题仅涉及前21列：

  .column {
 grid-column：span 21; 
} 
  

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

^{< a href = https://developer.mozilla.org/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts rel = nofollow noreferrer>使用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-gap
属性

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

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

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

  1002-（30 * 23）= 312 
  

我们现在知道第二个容器是312px。

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

  312/24 = 13 
  

因此每个 fr 单位等于13px。

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

  21 * 13 = 273px（可用空间的总宽度）
 20 * 30 = 600px（装订线的总宽度）
 ----- 
 873px 
  

或者，您可以从总宽度中减去三个 fr 个单位和三个装订线：

  1002px-（13 * 3）-（30 * 3）= 873px 
  

---

解决方案

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

要在小于全宽度时实现相等宽度宽度，您需要为列使用其他大小调整方法，例如 px 或 em 。 / p>

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

Using css-grid I have setup a 24 column grid inside of container that is 1002px wide.

Inside the container div, there is a child div that spans 21 columns. The width of I am expecting of the child div is:

21/24 * 1002 = 876.75

When a grid-gap property is added, the width of the column decreases to 873px, which is not desired.

How can I write my CSS so that the width of the div is 876.75px?

See example: 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>

解决方案

Both grid containers have 24 columns and a width of 1002px:

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

Your question involves only the first 21 columns:

.column {
   grid-column: span 21;
}

This means that the last three columns and grid gaps should be excluded from your calculations.

^{Using Firefox's grid overlay tool. The striped bars are the gutters.}

---

First Container

In the first container, having no gutters, each fr unit is equal to 41.75px.

1002 / 24 = 41.75

This means that 21 columns equal a width of 876.75px.

41.75 * 21 = 876.75px

---

Second Container

With regard to the second container, the first thing to remember is that the fr unit represents only free space. That is the space left over after other sizes have been factored in, including the gutters.

7.2.3. Flexible Lengths: the fr unit

A flexible length or <flex> is a dimension with the fr unit, which represents a fraction of the free space in the grid container.

free space

Equal to the available grid space minus the sum of the base sizes of all the grid tracks (including gutters), floored at zero. If available grid space is indefinite, the free space is indefinite as well.

In the first container, all space is free space. Not so in the second container.

Also important to note: The grid-gap property applies only between grid items, and never between items and the container.

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

These properties specify the gutters between grid rows and grid columns, respectively.

Therefore, in a 24-column grid there are 23 gutters (see image above).

So for the second container we must first subtract the space taken by the gutters:

1002 - (30 * 23) = 312

We now know that the free space in the second container is 312px.

Now we need to determine the value of each fr unit.

312 / 24 = 13

So each fr unit is equal to 13px.

Now we need to figure out the total width of the gutters and fr's for 21 columns:

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

Or you can just subtract three fr units and three gutters from the total width:

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

---

Solution

Since you're using the fr unit for establishing length, and the amount of free space differs between containers, your code can achieve equal width for both containers only at full width (24 columns).

To achieve equal width at less than full width, you'll need to use a different sizing method, such as px or em, for the columns.

There may be other solutions depending on your overall goal.

这篇关于为什么grid-gap会更改CSS Grid中列的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！