行之间的间距比预期的宽

Question

我有一个4格宽的网格布局（显示：网格）。当只有两行时，它们之间的间距大于它应该是的那样。如果有三行或更多行，那么一切看起来都应该如此。这基本上就是html的样子：

<div class="thumbnail-container">
  <div class="thumbnail-grid">
     <div class="thumbnail-grid-cell"></div>
     <div class="thumbnail-grid-cell"></div>
     <div class="thumbnail-grid-cell"></div>
     <!-- and so on... -->
  </div>
</div>

这些是我的css规则：

.thumbnail-container {
    overflow: scroll;
}

.thumbnail-grid {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-row-gap: 5px;
    grid-column-gap: 5px;
    height: 250px;
    margin: 8px;
}

.thumbnail-grid-cell {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    position: relative;
}

只是为了澄清：

这是2行的样子：

这是3行的样子：

列间距始终正确。

Answer 1

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.thumbnail-grid {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-row-gap: 5px;
  grid-column-gap: 5px;
  margin: 8px;
  background: lightblue;
}

.thumbnail-grid-cell {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  position: relative;
}

<div class="thumbnail-container">
  <div class="thumbnail-grid">
    <div class="thumbnail-grid-cell"></div>
    <div class="thumbnail-grid-cell"></div>
  </div>
</div>

<div class="thumbnail-container">
  <div class="thumbnail-grid">
    <div class="thumbnail-grid-cell"></div>
    <div class="thumbnail-grid-cell"></div>
    <div class="thumbnail-grid-cell"></div>
  </div>
</div>

<div class="thumbnail-container">
  <div class="thumbnail-grid">
    <div class="thumbnail-grid-cell"></div>
    <div class="thumbnail-grid-cell"></div>
    <div class="thumbnail-grid-cell"></div>
    <div class="thumbnail-grid-cell"></div>
  </div>
</div>

Answer 2

这里很难找到解决方案，因为没有足够的数据来重现问题。但这可能是：

由于您没有明确定义网格中的任何行，因此会隐式添加行，并且默认情况下将其高度设置为grid-auto-rows: auto。

auto和1fr值将延伸以占据容器中的空白区域。

因此，您在图片＃1中看到的差距是而不是行之间的差距。

行之间的实际差距为5px，由grid-row-gap规则设置。

行之间存在间隙，因为网格项未填充行的高度。

这样看：

• 有两行。
• 容器设置为height: 250px。
• 行划分高度相等，因此每行高度为122.5像素（扣除5px网格行间距后）。
• 但这些行中的项目设置为height: 100px。
• 因此，物品的下边缘与行的下边缘之间有22.5像素的间隙。

如果有三行，则需要此可用空间，并且行将关闭。

以下是三种可能的解决方案：

1. 尝试auto
，而不是fr或grid-auto-rows: min-content
2. 删除容器上的height: 250px;这会将容器的高度设置为内容的高度（即height: auto）
3. 将align-content: start添加到容器

有关详细信息，请参阅以下帖子：

• Why does CSS Grid layout add extra gaps between cells?
• Reduce space between rows in CSS Grid