如何让CSS Grid高度固定为3行且内容超量时可滚动？

要实现固定3行高度且内容溢出时垂直滚动的CSS Grid，无需手动设置像素高度，核心思路是通过外层容器限定高度，让Grid容器在固定高度内滚动。具体实现如下：

完整代码 #

HTML

<div class="grid-wrapper">
  <div id="grid"></div>
</div>

CSS

.grid-wrapper {
  width: 300px;
  border: 3px solid blue;
  display: grid;
  grid-template-rows: repeat(3, auto);
  gap: 2px; /* 与Grid内部垂直间距保持一致 */
}

#grid {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto; /* 自动生成超出3行的新行 */
  height: 100%;
  overflow-y: auto;
  grid-row: 1 / -1; /* 让Grid填满外层容器的全部3行空间 */
}

#grid>div {
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 16 / 9;
}

JavaScript

const grid = document.getElementById("grid");
for (let i = 1; i <= 12; i++) { // 可修改数量测试滚动效果
  const item = document.createElement("div");
  item.innerHTML = i;
  grid.appendChild(item);
}

原理说明 #

1. 外层容器.grid-wrapper采用Grid布局，grid-template-rows: repeat(3, auto)会根据子元素的aspect-ratio自动计算出3行的总高度，无需手动设置像素值
2. 原Grid容器#grid设置height: 100%，使其高度与外层容器完全匹配，同时开启overflow-y: auto，当内部元素超出3行容量时自动触发垂直滚动
3. grid-row: 1 / -1确保Grid容器填满外层容器的所有行空间，避免出现布局间隙

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