时间戳

首页 > 解决方案 > 行间距比预期宽

html - 行间距比预期宽

问题描述

我有一个 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 行的样子：

2行网格

这是 3 行的样子：

3行网格

列间距始终正确。

标签： htmlcssgrid-layoutcss-grid

解决方案

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

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

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

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

2行网格

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

由于网格项未填充行的高度，因此行之间会出现间隙。

这样看：

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

当你有三行时，需要这个可用空间，并且行关闭。

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

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

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

推荐阅读