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

Question

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

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

null

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>

null

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

null

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>