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

Question

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

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

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>

修改后的codepen演示

更多细节:CSS网格布局中百分比和fr单位之间的差异

Answer 2

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

解决方案如下所示：

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

更多关于这里的minmax()功能。