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

Question

为什么我在下面的sn-p中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

Answer 1

您有一个 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>

revised codepen demo

更多详情：The difference between percentage and fr units in CSS Grid Layout

Answer 2

如果您想使用百分比或其他单位，还有另一种解决方案。使用minmax() 函数将允许列缩小以适合父容器并且不会导致溢出。

解决方案如下所示：

grid-template-columns: minmax(auto, 25%) minmax(auto, 50%) minmax(auto, 25%);
gap: 10px;

更多关于minmax()函数here。

Answer 3

回复晚了，但 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) 依赖于您的项目的最小大小，并且当这些项目或内部元素中的任何一个预计随着 @ 之类的东西无限增长时987654331@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/

Answer 4

如果你有固定数量的网格列应该是相同的宽度并使用grid-gap，有一种方法可以做到：

display: grid;
grid-template-columns: repeat(4, calc(25% - 0.75em));
grid-gap: 1em;

在这种情况下，每行将有 4 个网格列，grid-gap 占用的总空间将为3em。为了使溢出空间均匀分布，将空间除以网格列数。

3em / 4 = 0.75em

这使得所有网格列具有相同的宽度。

Codepen demo

Answer 5

这适用于垂直溢出 + 自动生成的行，这是一个 hacky 解决方案。

说，您已经明确定义了列，但是对于它们在运行时添加的行，例如，对于您的笔记应用程序，您添加 notes-sn-p，容器有 5 列（每行）和自动生成的行（无限行） ：

.container {
  display: grid;
  /* grid-auto-rows: auto; */
  grid-template-columns: repeat(5, 19%);
}

问题 如果使用百分比（%）定义网格间隙，则会发生溢出：

.container {
  grid-row-gap: 1.25%; /*Cause overflow*/
}

+ 使用这种方法，您的网格行间距将根据添加的行的大小而有所不同。

解决方案为避免这种情况，请使用固定大小值（px、rem、em 等）设置网格间隙：

.container {
  grid-row-gap: 1rem; /*Won't cause overflow*/
}