行间距比预期宽

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

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

因为您没有在网格中明确定义任何行，所以会隐式添加行，并且它们的高度默认设置为 grid-auto-rows: auto。

auto 和 1fr 值将拉伸以占据容器中的空白空间。

因此，您在图像 #1 中看到的间隙不是行之间的间隙。

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

行之间出现间隙，因为网格项没有填满行的高度。

这样看：

• 有两行。
• 容器设置为height: 250px。
• 行均分高度，因此每行的高度均为 122.5 像素（减去 5 像素的网格行间距后）。
• 但这些行中的项目设置为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

Answer 2

* {
  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>