我试图创建一个网格模板布局，但一个奇怪的列间隙一直出现在最右边。我怎么去掉这个?
我已经包含了问题的链接(见右侧额外的列间隙)https://i.stack.imgur.com/pPKNU.png
下面是我的HTML和CSS代码:
.container {
width: 100%;
max-width: 1920px;
margin: auto;
}
.img-gallery {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-column-gap: 30px;
grid-template-areas: 'img-1 img-2 img-3';
}
.img-gallery div {
width: 100%;
height: 300px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}<div class="container">
<div class="img-gallery">
<div class="img-1" style="background-image: url(images/img-1);"></div>
<div class="img-2" style="background-image: url(images/img-2);"></div>
<div class="img-3" style="background-image: url(images/img-3);"></div>
</div>
</div>我通过自己的图像地址尝试过，它工作得很好。在最右边的列中不存在多余的空白。我还删除了一些代码，你不需要他们在你的代码(他们已经被注释):
.container {
width: 100%;
max-width: 1920px;
margin: auto;
}
.img-gallery {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-column-gap: 30px;
/*
grid-template-areas: 'img-1 img-2 img-3';
*/
}
.img-gallery div {
height: 300px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/*
position: relative;
display: flex;
align-items: center;
justify-content: center;
*/
}<div class="container">
<div class="img-gallery">
<div class="img-1" style="background-image: url('https://s4.uupload.ir/files/1-6-5_ssnb.jpg');"></div>
<div class="img-2" style="background-image: url('https://s4.uupload.ir/files/1-6-5_ssnb.jpg');"></div>
<div class="img-3" style="background-image: url('https://s4.uupload.ir/files/1-6-5_ssnb.jpg');"></div>
</div>
</div>我检查了你的代码，没有发现任何问题。
请检查下面的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 100%;
max-width: 1920px;
margin: auto;
}
.img-gallery {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-column-gap: 30px;
grid-template-areas: 'img-1 img-2 img-3';
}
.img-gallery div {
width: 100%;
height: 300px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<div class="img-gallery">
<div class="img-1" style="background-color: red;"></div>
<div class="img-2 " style="background-color: green;"></div>
<div class="img-3" style="background-color: yellow;"></div>
</div>
</div>
</body>
</html>