Grid右侧出现双倍grid-gap问题求助（使用fr单位）

我最近碰到一个Grid布局的奇怪问题——容器右侧居然多出了两倍的grid-gap间距。我用的是fr单位，不是百分比，所以排除了那种经典的百分比适配导致的溢出问题，而且在开发者工具里能明确看到有两个grid-gap被额外添加到了右侧。有没有大佬知道这是咋回事？

我的CSS代码： #

.Portfolio .wrapper{
 grid-gap:10px;
 padding:40px 0px;
 width: 95%;
 margin: auto;
 display: grid;
 grid-template-columns: repeat(5,1fr) ;
 grid-auto-rows: 200px;
 grid-template-areas:
 "img-30 img-30 img-30 img-31 img-31"
 "img-30 img-30 img-30 img-31 img-31"
 "img-35 img-35 img-34 img-34 img-34"
 "img-35 img-35 img-34 img-34 img-34"
 "img-36 img-36 img-36 img-32 img-32"
 "img-36 img-36 img-36 img-32 img-32" ;
}
.Portfolio .wrapper >*{
 background-position: center;
 background-size: cover;
 cursor: pointer;
}
.Portfolio .wrapper .img-30{
 background-image: url("Images/30.jpg");
 grid-area: img-30;
}
.Portfolio .wrapper .img-31{
 background-image: url("Images/31.jpg");
 grid-area: img-31;
}
.Portfolio .wrapper .img-32{
 background-image: url("Images/32.jpg");
 grid-area: img-32;
}
.Portfolio .wrapper .img-33{
 background-image: url("Images/33.jpg");
 grid-area: img-33;
}
.Portfolio .wrapper .img-34{
 background-image: url("Images/34.jpg");
 grid-area: img-34;
}
.Portfolio .wrapper .img-35{
 background-image: url("Images/35.jpg");
 grid-area: img-35;
 background-color: red;
}
.Portfolio .wrapper .img-36{
 background-image: url("Images/36.jpg");
 grid-area: img-36;
}

我的HTML代码： #

<main class="Portfolio">
 <div class="wrapper">
 <div class="img-30"></div>
 <div class="img-31"></div>
 <div class="img-32"></div>
 <div class="img-33"></div>
 <div class="img-34"></div>
 <div class="img-35"></div>
 <div class="img-36"></div>
 </div>
</main>

问题原因与解决方案 #

嘿，我找到问题所在了！你的Grid布局里藏了一个“幽灵元素”——img-33。

你在HTML里添加了<div class="img-33"></div>，也给它设置了grid-area: img-33，但在grid-template-areas里完全没有给它分配任何位置。当Grid容器中存在未被分配到网格区域的元素时，浏览器会自动为这个元素创建新的网格轨道（也就是额外的一列），而且这个新列同样会应用grid-gap的间距设置。

原本你定义了5列，应该有4个grid-gap，但因为这个额外的列，浏览器会把Grid变成6列，对应5个grid-gap。再加上你的.wrapper设置了固定的width:95%，整个Grid的总宽度会超出容器的设定宽度，导致横向滚动，视觉上就像是右侧多出了双倍的grid-gap。

解决方法非常直接，选其中一个就行：

• 删除未使用的元素：直接把HTML里的<div class="img-33"></div>删掉，因为你根本没在网格布局里用到它；
• 分配网格区域：调整grid-template-areas，给img-33预留位置，比如修改某一行的布局，把它加进去；
• 隐藏元素：如果暂时不想删除，可以给.img-33加上display:none，这样浏览器就不会为它创建额外的轨道了。

我刚模拟了你的代码，删掉img-33之后，右侧的额外间距立刻就消失了，完美解决问题！

内容的提问来源于stack exchange，提问作者Sid Turner