行间距比预期宽

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 值将拉伸以占据容器中的空 space。

所以您在图像 #1 中看到的间隙不是行之间的间隙。

行与行之间的实际间距为 5 像素，由您的 grid-row-gap 规则设置。

行与行之间出现间隙，因为网格项未填充行的高度。

这样看：

有两行。
容器设置为height: 250px。
行平均分配高度，因此每行的高度均为 122.5px（减去 5px 的网格行间距后）。
但这些行内的项目设置为 height: 100px。
所以项目的底部边缘和行的底部边缘之间有 22.5 像素的间隙。

当你有三行时，需要这个免费的 space，并且行会靠近。

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

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

有关更多详细信息，请参阅这些帖子：

行间距比预期宽

Spacing between rows wider than intended

html

css

grid-layout

css-grid