Question

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

我在grid-gap: 10px网格容器上应用.body后会生成溢出。

＆＃13;

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

＆＃13;

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

＆＃13;

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

如果您有固定数量的网格列，它们的宽度应相同，并使用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 4

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

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

.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*/
}

为什么网格间隙会导致溢出？

4 个答案: