如何实现CSS Grid固定行数等高且填满可视容器高度？

需求说明 #

• 使用CSS Grid布局，固定行数（例如4行）
• 所有行高度相等，且整体填满容器的可视高度
• 当网格项数量超出容器容纳范围时，支持纵向滚动
• 行高始终保持一致，不受内容多少影响

解决方案 #

通过以下CSS调整即可实现目标：

1. 给容器设置可视高度（如100vh），确保它占满屏幕高度
2. 使用grid-template-rows: repeat(4, 1fr)让4行等分容器高度
3. 添加overflow-y: auto处理超出容器的网格项，实现滚动效果

修改后的代码示例 #

CSS代码

.container {
  display: grid;
  background: white;
  /* 占满可视高度 */
  height: 100vh;
  /* 固定4行，每行等分高度 */
  grid-template-rows: repeat(4, 1fr);
  /* 超出部分纵向滚动 */
  overflow-y: auto;
  /* 可选：添加网格间距 */
  gap: 8px;
  /* 清除默认边距 */
  margin: 0;
}

.row {
  font-size: 3rem;
  border: solid black 1px;
  /* 可选：让行内内容居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

HTML代码

<div class="container">
  <div class="row">row1</div>
  <div class="row">row2</div>
  <div class="row">row3</div>
  <div class="row">row4</div>
  <div class="row">row5</div>
  <div class="row">row6</div>
  <div class="row">row7</div>
  <div class="row">row8</div>
</div>

关键说明 #

• repeat(4, 1fr)：1fr单位表示等分可用空间，4行就会把容器高度平均分成4份，确保每行高度完全一致
• height: 100vh：vh是视口高度单位，100vh等于浏览器可视区域的高度，保证容器填满屏幕
• overflow-y: auto：当网格项总高度超过容器高度时，自动显示垂直滚动条，同时保持已有的4行等高布局不变

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