css - 为什么网格间隙会导致没有百分比的溢出？

Question

为什么我在以下代码段中的 X 轴上有溢出？
一旦我在我的 .box 网格容器上应用 grid-gap: 35px ，就会生成溢出。

.container {
  width: 500px;
  border: 1px solid #000;
  margin: 0 auto;
}
.box {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  background: #00f;
  gap: 35px;
}
.item {
  height: 50px;
  background: #0f0;
  text-align: center;
  line-height: 40px;
  vertical-align: middle;
}
.span4 {
  grid-column: span 4;
}

<div class="container">
  <div class="box">
    <div class="item span4">A</div>  
    <div class="item span4">B</div>  
    <div class="item span4">C</div>  
    <div class="item span4">D</div>  
  <div>  
</div>

Answer 1

这是因为网格元素(即 .container )不能小于它的内容(所有 .item 组合)。让我们在这里考虑一下您的情况。
容器宽度 = 500pxgrid-template-columns用 gap 重复 16 次的 35px每个。如果我们在这里做数学运算，那就是 560px (16*35) 这将大于您的容器宽度( 500px )。
要解决此问题，您可以将容器宽度增加到 560px或按百分比制作，即 100%

.container {
  width: 100%; /*560px*/
  border: 1px solid #000;
  margin: 0 auto;
}
.box {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  background: #00f;
  gap: 35px;
}
.item {
  height: 50px;
  background: #0f0;
  text-align: center;
  line-height: 40px;
  vertical-align: middle;
}
.span4 {
  grid-column: span 4;
}

<div class="container">
  <div class="box">
    <div class="item span4">A</div>  
    <div class="item span4">B</div>  
    <div class="item span4">C</div>  
    <div class="item span4">D</div> 
  <div>  
</div>