如何强制CSS Grid仅渲染指定行数并忽略其余项目？

嘿，这个问题我之前踩过坑！你设置的grid-template-rows: repeat(3, 1fr)其实只是定义了显式网格的3行，但当项目数量超过显式网格能容纳的数量时，浏览器会自动创建隐式网格行来放置剩下的元素——这就是你看到第4行的原因。

要实现只渲染指定行数、隐藏多余项目的效果，这里有几个靠谱的CSS方案：

方案1：控制隐式网格行的高度+溢出隐藏 #

这是最灵活的方法，不需要依赖固定高度：

.grid-constrain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-template-rows: repeat(3, 1fr);
  grid-auto-rows: 0; /* 把自动生成的隐式行高度设为0 */
  overflow: hidden; /* 隐藏溢出容器的内容 */
}

原理是：grid-auto-rows控制隐式网格行的高度，设为0后多余的项目会被压缩到高度为0的行里，再通过overflow: hidden把这部分彻底隐藏。

方案2：用max-height限制容器高度+溢出隐藏 #

如果你的网格行高度是固定值（比如每行200px），可以直接计算总高度，用max-height限制容器，再隐藏溢出：

.grid-constrain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-template-rows: repeat(3, 200px);
  max-height: 600px; /* 3*200px，还要加上gap的高度，如果有的话 */
  overflow: hidden;
}

这种方法适合行高固定的场景，但如果用1fr自适应高度的话，就不如方案1灵活。

方案3：用JavaScript动态隐藏多余项目 #

如果需要更精准的控制（比如不仅隐藏，还要彻底不渲染），可以用JS计算需要保留的项目数量，把多余的设为display: none：

const grid = document.querySelector('.grid-constrain');
const items = grid.querySelectorAll('.item');
// 计算3行能容纳的最大项目数：3行 × 列数
const maxItems = 3 * (grid.style.gridTemplateColumns.match(/minmax/g)?.length || 1);
items.forEach((item, index) => {
  if (index >= maxItems) {
    item.style.display = 'none';
  }
});

不过这个方案需要依赖JS，适合必须彻底移除多余元素的场景。

简单总结一下：优先用方案1，它最适配1fr这种自适应行高的情况，能完美实现你要的“只渲染3行，忽略其余项目”的效果~

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