如何让自适应网格适配父容器高度且不溢出？

问题说明 #

需要实现一个5x5的正方形网格，要求它能随页面缩放响应式填充，且完全包含在高度为页面50%的父容器内，同时在父容器中居中显示、以最大适配尺寸呈现（产生垂直间隙）。当前网格单元格存在从父容器底部溢出并被裁剪的问题。

修改后的完整代码 #

CSS 代码 #

/* 确保根元素和body占满视口高度，消除默认边距 */
html, body {
  height: 100%;
  margin: 0;
}

.view {
  display: grid;
  grid-template-rows: 10% 50% 40%;
  height: 100vh; /* 让容器占满视口高度，确保百分比行高生效 */
}

.gridContainer {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 2px; /* 可选：添加单元格间隙，避免边框重叠 */
  /* 核心设置：强制网格为正方形，且不超出父容器范围 */
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  /* 让网格在父容器内水平垂直居中 */
  margin: auto;
  padding: 10px; /* 可选：添加内边距，避免网格贴边 */
  box-sizing: border-box;
}

.gridCell {
  aspect-ratio: 1 / 1;
  border: 1px solid #000;
  box-sizing: border-box; /* 确保边框包含在单元格尺寸内，防止溢出 */
  display: grid;
  place-items: center; /* 让单元格内文本居中 */
}

HTML 代码 #

<div class="view">
  <div>TOP 10%</div>
  <div class="gridContainer"> <!-- 50% height -->
    <!-- 第1行 -->
    <div class="gridCell">col1 row1</div>
    <div class="gridCell">col2 row1</div>
    <div class="gridCell">col3 row1</div>
    <div class="gridCell">col4 row1</div>
    <div class="gridCell">col5 row1</div>
    <!-- 第2行 -->
    <div class="gridCell">col1 row2</div>
    <div class="gridCell">col2 row2</div>
    <div class="gridCell">col3 row2</div>
    <div class="gridCell">col4 row2</div>
    <div class="gridCell">col5 row2</div>
    <!-- 第3行 -->
    <div class="gridCell">col1 row3</div>
    <div class="gridCell">col2 row3</div>
    <div class="gridCell">col3 row3</div>
    <div class="gridCell">col4 row3</div>
    <div class="gridCell">col5 row3</div>
    <!-- 第4行 -->
    <div class="gridCell">col1 row4</div>
    <div class="gridCell">col2 row4</div>
    <div class="gridCell">col3 row4</div>
    <div class="gridCell">col4 row4</div>
    <div class="gridCell">col5 row4</div>
    <!-- 第5行 -->
    <div class="gridCell">col1 row5</div>
    <div class="gridCell">col2 row5</div>
    <div class="gridCell">col3 row5</div>
    <div class="gridCell">col4 row5</div>
    <div class="gridCell">col5 row5</div>
  </div>
  <div>BOTTOM 40%</div>
</div>

关键修改解析 #

• 给.view添加height:100vh，确保百分比行高基于视口高度准确计算
• 给.gridContainer设置aspect-ratio:1/1强制网格为正方形，同时用max-width:100%和max-height:100%限制其尺寸不超出父容器
• 用margin:auto实现网格在父容器内的水平垂直居中
• 给.gridCell和.gridContainer添加box-sizing:border-box，避免边框、内边距额外撑大元素导致溢出
• 补充grid-template-rows:repeat(5,1fr)让5行网格高度均匀分配

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