为什么 CSS 网格会增加额外的间隙？答案

【问题标题】：why CSS grid put extra gap?为什么 CSS 网格会增加额外的间隙？
【发布时间】：2018-07-06 19:15:58
【问题描述】：

我正在制作 WordPress 主题，并使用 CSS 网格制作布局。而且我想不出为什么第一张图片和底部的图片之间有额外的差距。

更新：添加了 sn-p，将 grip-gap 更改为 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>

【问题讨论】：

在您的first-of-type 下尝试将您的间距设置为 0px 并查看它的行为。正如 Cale 所说，虽然我们更难使用 PHP，但是如果您获得渲染 HTML 的 sn-p，我们可以检查一下。
@cale_b 该图片来自网络前端。但这是为什么呢？如果我删除 .box:first-of-type{ grid-column: 1/3;网格行：1/3；看起来不错。当 gap 为 0 时，该 gap 仍然存在
@whothatisShake 如果您检查页面本身的元素，它将为您提供呈现的 HTML，您可以复制和粘贴来代替 PHP。 :) 我们无法访问与您相同的内容，因此它限制了我们真正可以使用的内容。发布 HTML，我们中的一个人应该能够告诉你发生了什么！
如果我猜的话，根据你所说的，似乎通过将第一张图像拉伸到第三行，它没有到达间隙的结尾，它到达了开头两边的缝隙。
box-sizing:border-box 是您在 img 元素上缺少的内容

标签： wordpress css css-grid

【解决方案1】：

问题不在于您的 Grid 布局本身，而在于您如何在图像上指定填充。如果你删除你的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>

【讨论】：

【解决方案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>

【讨论】：

这是我的答案的副本，但也请务必定义您的 height 属性。 :)
@CodeSpent 对不起，我忘了提你.. 也只是改变填充并没有解决问题，额外的间隙仍然存在，改变包装类中的间隙，解决了这个问题。非常感谢您的帮助:)
见my CodePen here。我最初没有在我的答案中包含我的 sn-p 中的高度，但在编辑中进行了调整。如果你想要均匀的差距，你的差距很好。您的图像只是没有占据其容器的整个高度，这就是为什么它看起来在那里有一个间隙。
在您当前的解决方案中，您的边界是不均匀的，因为您的 imgs 没有分配给它们的高度。