为什么CSS网格会留出额外的空隙？

Question

我正在制作一个WordPress主题，并使用CSS网格进行布局。而且我不认为第一个图片和最下面的图片之间存在间隙的原因。

更新：添加了代码段，将抓紧间隙更改为1％，因为1px无法正常工作

.wrapper {
    display: grid;
    grid-template-columns: 33.3% 33.3% 33.3%;
    grid-template-rows: 33.3% 33.3% 33.3%;
    margin: auto;
    width: 80%;
    grid-gap: 1%;
}

.item img{
    width: 100%;
    padding: 4px;
    background-color: black;
    display: block;
}

.item:first-of-type{
    grid-column: 1/3;
    grid-row: 1/3;
}

<div class="wrapper">
  <div class="item"><img src="http://static1.squarespace.com/static/5898e29c725e25e7132d5a5a/58aa11bc9656ca13c4524c68/58aa11e99656ca13c45253e2/1487540713345/600x400-Image-Placeholder.jpg?format=original" alt=""></div>
  <div class="item"><img src="http://static1.squarespace.com/static/5898e29c725e25e7132d5a5a/58aa11bc9656ca13c4524c68/58aa11e99656ca13c45253e2/1487540713345/600x400-Image-Placeholder.jpg?format=original" alt=""></div>
  <div class="item"><img src="http://static1.squarespace.com/static/5898e29c725e25e7132d5a5a/58aa11bc9656ca13c4524c68/58aa11e99656ca13c45253e2/1487540713345/600x400-Image-Placeholder.jpg?format=original" alt=""></div>
  <div class="item"><img src="http://static1.squarespace.com/static/5898e29c725e25e7132d5a5a/58aa11bc9656ca13c4524c68/58aa11e99656ca13c45253e2/1487540713345/600x400-Image-Placeholder.jpg?format=original" alt=""></div>
  <div class="item"><img src="http://static1.squarespace.com/static/5898e29c725e25e7132d5a5a/58aa11bc9656ca13c4524c68/58aa11e99656ca13c45253e2/1487540713345/600x400-Image-Placeholder.jpg?format=original" alt=""></div>
  <div class="item"><img src="http://static1.squarespace.com/static/5898e29c725e25e7132d5a5a/58aa11bc9656ca13c4524c68/58aa11e99656ca13c45253e2/1487540713345/600x400-Image-Placeholder.jpg?format=original" alt=""></div>
</div>

Answer 1

问题不在于您的网格布局本身，而在于您如何在图像上指定填充。如果删除行padding:4px;，您将看到所有内容完全对齐。这是因为您要定位商品中的图片，而不是商品本身。

您可以在这里看到：https://codepen.io/codespent/pen/ZRddPN

您可以简单地在项目上设置填充，以确保一切按需进行。

.item {
padding: 4px;
}

希望这会有所帮助，绝对也可以考虑用那只笔玩一下，只是为了看看不同的事物如何表现。

.wrapper {
  display: grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
  grid-template-rows: 33.3% 33.3% 33.3%;
  margin: auto;
  width: 80%;
  grid-gap: 1px;
}

.item img {
  width: 100%;
  height: 100%;
  /*padding: 4px;  Issue created here */
  background-color: black;
  display: block;
}


/* Lets set the padding on the container instead of the child */

.item {
  padding: 4px;
}

.item:first-of-type {
  grid-column: 1/3;
  grid-row: 1/3;
}

<div class="wrapper">
  <div class="item"><img src="http://static1.squarespace.com/static/5898e29c725e25e7132d5a5a/58aa11bc9656ca13c4524c68/58aa11e99656ca13c45253e2/1487540713345/600x400-Image-Placeholder.jpg?format=original" alt=""></div>
  <div class="item"><img src="http://static1.squarespace.com/static/5898e29c725e25e7132d5a5a/58aa11bc9656ca13c4524c68/58aa11e99656ca13c45253e2/1487540713345/600x400-Image-Placeholder.jpg?format=original" alt=""></div>
  <div class="item"><img src="http://static1.squarespace.com/static/5898e29c725e25e7132d5a5a/58aa11bc9656ca13c4524c68/58aa11e99656ca13c45253e2/1487540713345/600x400-Image-Placeholder.jpg?format=original" alt=""></div>
  <div class="item"><img src="http://static1.squarespace.com/static/5898e29c725e25e7132d5a5a/58aa11bc9656ca13c4524c68/58aa11e99656ca13c45253e2/1487540713345/600x400-Image-Placeholder.jpg?format=original" alt=""></div>
  <div class="item"><img src="http://static1.squarespace.com/static/5898e29c725e25e7132d5a5a/58aa11bc9656ca13c4524c68/58aa11e99656ca13c45253e2/1487540713345/600x400-Image-Placeholder.jpg?format=original" alt=""></div>
  <div class="item"><img src="http://static1.squarespace.com/static/5898e29c725e25e7132d5a5a/58aa11bc9656ca13c4524c68/58aa11e99656ca13c45253e2/1487540713345/600x400-Image-Placeholder.jpg?format=original" alt=""></div>
</div>

Answer 2

因此，我在@CodeSpent的帮助下修复了我的代码。我在图片上添加了“边框”，并在其中添加了填充内容，而非img填充内容。同时更改网格列和网格行的间隙。

.wrapper {
    display: grid;
    grid-template-columns: 33.3% 33.3% 33.3%;
    grid-template-rows: 33.3% 33.3% 33.3%;
    margin: auto;
    width: 80%;
    grid-column-gap: 22px;
    grid-row-gap: 10px;
}

.item{
    padding: 4px;
    background-color: black;
}

.item img{
    width: 100%;
    display: flex;
    
}

.item:first-of-type{
    grid-column: 1/3;
    grid-row: 1/3;
}

<div class="wrapper">
  <div class="item"><img src="http://static1.squarespace.com/static/5898e29c725e25e7132d5a5a/58aa11bc9656ca13c4524c68/58aa11e99656ca13c45253e2/1487540713345/600x400-Image-Placeholder.jpg?format=original" alt=""></div>
  <div class="item"><img src="http://static1.squarespace.com/static/5898e29c725e25e7132d5a5a/58aa11bc9656ca13c4524c68/58aa11e99656ca13c45253e2/1487540713345/600x400-Image-Placeholder.jpg?format=original" alt=""></div>
  <div class="item"><img src="http://static1.squarespace.com/static/5898e29c725e25e7132d5a5a/58aa11bc9656ca13c4524c68/58aa11e99656ca13c45253e2/1487540713345/600x400-Image-Placeholder.jpg?format=original" alt=""></div>
  <div class="item"><img src="http://static1.squarespace.com/static/5898e29c725e25e7132d5a5a/58aa11bc9656ca13c4524c68/58aa11e99656ca13c45253e2/1487540713345/600x400-Image-Placeholder.jpg?format=original" alt=""></div>
  <div class="item"><img src="http://static1.squarespace.com/static/5898e29c725e25e7132d5a5a/58aa11bc9656ca13c4524c68/58aa11e99656ca13c45253e2/1487540713345/600x400-Image-Placeholder.jpg?format=original" alt=""></div>
  <div class="item"><img src="http://static1.squarespace.com/static/5898e29c725e25e7132d5a5a/58aa11bc9656ca13c4524c68/58aa11e99656ca13c45253e2/1487540713345/600x400-Image-Placeholder.jpg?format=original" alt=""></div>
</div>