Grid与Flex选型咨询：如何实现无跨行高度间隙的紧凑布局？

选型结论：优先使用Grid #

Flex是一维布局，仅能按行或列单向排列，当同一行内元素高度不同时，整行高度会被最高元素拉平，导致矮元素下方出现无法填补的间隙，完全无法实现“元素上下紧密衔接、无额外间隙”的需求。

而Grid是二维布局，配合grid-auto-flow: dense可让后续元素自动填补前方空白区域，刚好匹配你的布局需求。

解决当前Grid布局的间隙问题 #

你当前代码的核心问题是grid-auto-rows: auto——这个属性会强制每一行的高度等于该行内最高元素的高度，导致矮元素下方产生空白，且grid-auto-flow: dense无法填补这些空白（因为行高已被固定）。

修正方案： #

1. 移除grid-auto-rows: auto，改用小步长的自动行，让元素根据自身高度占据对应行数：

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(auto-fill, 10px); /* 设置小步长的基础行高 */
grid-auto-flow: dense;
gap: 10px;

2. 给每个子元素设置grid-row: span [行数]，行数由元素自身高度除以基础行高（这里是10px）计算得出。比如高度为250px的元素，设置grid-row: span 25；高度为130px的元素，设置grid-row: span 13。

如果不想手动计算行数，可通过JavaScript动态处理：

document.querySelectorAll('.grid-item').forEach(item => {
  const height = item.offsetHeight;
  const rowSpan = Math.ceil(height / 10); // 10对应grid-template-rows的步长
  item.style.gridRow = `span ${rowSpan}`;
});

替代方案（原生瀑布流） #

若你的浏览器版本较高（Chrome 117+），可直接使用原生CSS Masonry布局，写法更简洁：

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry; /* 原生瀑布流布局，自动紧密排列元素 */
gap: 10px;

这种方式无需手动设置行高和计算行数，浏览器会自动让元素上下紧密衔接，消除额外间隙。

内容的提问来源于stack exchange，提问作者TheGridCoder