如何隐藏CSS Grid中的implicit rows？保持2行布局并隐藏溢出项

要实现宽容器自动适配多列、窄容器下仅显示2行网格（超出项隐藏）的效果，我们可以结合CSS Grid的显式/隐式网格控制和溢出属性来实现，具体代码和思路如下：

示例代码 #

HTML #

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item">10</div>
</div>

CSS #

.grid-container {
  display: grid;
  /* 宽容器自动适配列数：最小列宽100px，剩余空间均分 */
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  /* 固定2个显式网格行，行高随内容自适应 */
  grid-template-rows: repeat(2, auto);
  /* 强制隐式行高度为0，避免超出的项生成可见行 */
  grid-auto-rows: 0;
  /* 容器溢出隐藏，彻底隐藏隐式行里的内容 */
  overflow: hidden;
  /* 可选：添加网格间距 */
  gap: 1rem;
  /* 模拟窄容器，取消注释即可测试窄屏效果 */
  /* width: 80vw; */
}

.grid-item {
  padding: 1rem;
  background: #f0f0f0;
  border: 1px solid #ccc;
  /* 确保内容不会强行撑开隐式行高度，配合grid-auto-rows: 0生效 */
  min-height: 0;
}

核心思路解析 #

1. 自适应列数：repeat(auto-fit, minmax(100px, 1fr))让容器在宽屏时自动增加列数（直到列宽不小于100px），窄屏时自动减少列数，完美适配不同屏幕宽度。
2. 固定显式行数：grid-template-rows: repeat(2, auto)明确只创建2个显式网格行，行高根据内容自动调整。
3. 隐藏隐式行：当网格项数量超过2×当前列数时，Grid会自动生成隐式行来放置多余项。我们通过grid-auto-rows: 0将这些隐式行的高度设为0，再配合overflow: hidden裁剪容器内超出的内容，确保多余项完全不可见。
4. 内容溢出防护：给网格项设置min-height: 0是为了避免某些长内容强行撑开隐式行的高度，保证隐式行始终保持高度为0的状态。

如果你需要固定行高（比如每行100px），可以简化代码：直接给容器设置height: 200px; overflow: hidden;，同时grid-template-rows: repeat(2, 100px)，这样无需设置grid-auto-rows也能达到效果。

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