简短回答

因为列的宽度加上间隙的宽度大于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>

revised codepen demo
更多详情：The difference between percentage and fr units

如果你想使用百分比或其他单位，还有一个解决方案。使用minmax()函数将允许列收缩以适应父容器，并且不会导致溢出。
解决方案如下所示：

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

更多关于minmax()函数的信息请点击这里。

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

回复晚了，但100%值得。

多资源摘要。

1.使用%
使用%计算的轴网柱不考虑檐沟（又名间隙）。因此，您需要将所添加间隙的像素添加到计算中。所以totalGridWidth = SUM(...%) + gutters = ~100% + gutters
1.使用fr
上一个问题不会发生**（第3个问题例外）**，因为它包括计算可用空间以及间隙。因此计算如下：因此，在这里你可以得到分数的比率，而不是百分比的部分。
或者换句话说，使用最小公因子（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/

我也遇到了这个问题，对我有效的方法是用grid-template-column: auto 50%;替换grid-template-column: 50% 50%;。

在我的例子中，使用百分比有一个问题：“差距：2%;”这变成溢出。当我使用“px”或其他维度而不是百分比（%）时-一切都没问题。