为什么grid-gap会导致溢出？

Question

为什么我在以下代码段中的 X 轴上有溢出？

一旦我在我的 .body 网格容器上应用 grid-gap: 10px ，就会产生溢出。

 div:not(.header):not(.body):not(.row) {
  border: 1px solid grey;
}

.header {
  margin-top: 20px;
  display: grid;
  grid-gap: 10px;
  grid-template-areas: "header-left header-right-up" "header-left header-right-down";
  grid-template-rows: 40px 40px;
  grid-template-columns: minmax(50px, 200px) auto;
}

.header-left {
  grid-area: header-left;
}

.header-right-up {
  grid-area: header-right-up;
}

.header-right-down {
  grid-area: header-right-down;
}

.body {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 25% 50% 25%;
  grid-auto-rows: 80px;
  grid-gap: 10px;
}

.row-left {
}

.row-center {
}

.row-right {
}

 <div class="header">
  <div class="header-left">image</div>
  <div class="header-right-up">content</div>
  <div class="header-right-down">long content</div>
</div>

<div class="body">
    <div class="row-left"></div>
    <div class="row-center"></div>
    <div class="row-right"></div>

    <div class="row-left"></div>
    <div class="row-center"></div>
    <div class="row-right"></div>

    <div class="row-left"></div>
    <div class="row-center"></div>
    <div class="row-right"></div>
  </div>
</div>

https://codepen.io/anon/pen/WdJExz?editors=1100

原文由 Damiano Barbati 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

简答

因为列的宽度加上间隙的宽度大于 100%。

---

解释

您有一个 3 列网格容器（ .body ）：

 grid-template-columns: 25% 50% 25%

这些列的总宽度为 100%。

然后，您在列（和行）之间添加装订线：

 grid-gap: 10px

这是以下的简写：

 grid-column-gap: 10px;
grid-row-gap: 10px;

所以这变成了宽度计算：

 25% + 50% + 25% + 10px + 10px

因此，

 100% + 20px > 100%, which results in an overflow condition

请注意， grid-*-gap 属性仅适用于网格项目之间 - 从不适用于项目和容器之间。这就是为什么我们计算两个网格间隙，而不是四个。

作为 解决方案，请尝试使用 fr 单位而不是百分比单位，它仅适用于可用空间。这意味着 fr 长度是在应用任何 grid-gap 长度 之后 计算的。

 grid-template-columns: 1fr 2fr 1fr

 div:not(.header):not(.body):not(.row) {
  border: 1px solid grey;
}

.header {
  margin-top: 20px;
  display: grid;
  grid-gap: 10px;
  grid-template-areas: "header-left header-right-up" "header-left header-right-down";
  grid-template-rows: 40px 40px;
  grid-template-columns: minmax(50px, 200px) auto;
}

.header-left {
  grid-area: header-left;
}

.header-right-up {
  grid-area: header-right-up;
}

.header-right-down {
  grid-area: header-right-down;
}

.body {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* ADJUSTMENT */
  grid-auto-rows: 80px;
  grid-gap: 10px;
}

.row-left {}

.row-center {}

.row-right {}

 <div class="header">
  <div class="header-left">image</div>
  <div class="header-right-up">content</div>
  <div class="header-right-down">long content</div>
</div>

<div class="body">
  <div class="row-left"></div>
  <div class="row-center"></div>
  <div class="row-right"></div>

  <div class="row-left"></div>
  <div class="row-center"></div>
  <div class="row-right"></div>

  <div class="row-left"></div>
  <div class="row-center"></div>
  <div class="row-right"></div>
</div>

修改后的 codepen 演示

更多细节在这里： 百分比和fr单位之间的差异

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

迟到的回复，但 100% 值得。

来自许多资源的摘要。

1. 与 %

使用 % 计算的网格列没有考虑排水沟（又称间隙）。因此，您需要将添加间隙的像素添加到计算中。所以 totalGridWidth = SUM(...%) + gutters = ~100% + gutters

1. 与 fr

上一个问题不会发生 （第 3 个例外） ，因为它包括计算可用空间以及间隙。所以计算如下： (free space - gutters) / 12 = 1fr 因此在这里你可以得到分数而不是百分比的比例。

或者换句话说，最小公约数（1fr = 25%）：

grid-template-columns: 1fr 2fr 1fr;

1. 与 minmax(0,Xfr)

默认情况下，浏览器布局引擎用于计算 Xfr 这个公式 minmax(auto,Xfr) 它依赖于您的项目的最小尺寸，以及这些项目或内部元素中的任何一个预计会增长的时间无限期地使用 width:100% auto 参数将使情况 2. 有时在溢出网格的情况下运行。为了防止这种情况，我们需要强制浏览器使用一种可以将元素缩小到真正最小值的方法，即 0px 要做到这一点，您需要使用 minmax(0,Xfr) 和 X 作为所需的分数。

或者换句话说，对于您以前的情况：

grid-template-columns: minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);

我知道这可能看起来太冗长了，但是鉴于您的这种边缘情况，我们不能在这里使用 repeat() ，无论如何，这对于您的溢出问题来说是一个防弹的。

您可以在我发现的这篇文章中阅读更多内容：

https://css-tricks.com/preventing-a-grid-blowout/

原文由 Ignacio Bustos 发布，翻译遵循 CC BY-SA 4.0 许可协议