3x3网格百分比行高失效，如何实现不受内容影响的均等正方形布局？

要解决内容影响单元格尺寸、同时适配浏览器的问题，核心是约束网格容器的宽高比为1:1，再用网格布局均分空间，同时确保单元格内容不会撑大容器。以下是具体实现方案：

核心思路 #

• 让网格容器始终保持正方形：利用aspect-ratio属性强制容器宽高相等，同时用min()函数限制容器最大尺寸，适配不同屏幕。
• 用fr单位均分网格空间：替代33%，自动处理间隙和剩余空间，确保3行3列严格均等。
• 隔离内容对单元格尺寸的影响：通过flex布局让内容居中，同时设置溢出隐藏，避免内容撑大单元格。

完整代码示例 #

HTML #

<body>
  <div class="cont">
    <div class="cell">动态内容1</div>
    <div class="cell">长文本内容测试，确保不会撑大单元格</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
    <div class="cell">7</div>
    <div class="cell">8</div>
    <div class="cell">9</div>
  </div>
</body>

CSS #

/* 重置默认样式，确保容器居中 */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f0f0;
}

/* 网格容器：强制正方形，适配视口 */
.cont {
  width: min(90vmin, 100%); /* 取视口最小边的90%或100%宽度，防止溢出 */
  aspect-ratio: 1/1; /* 宽高比1:1，确保容器是正方形 */
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列均分 */
  grid-template-rows: repeat(3, 1fr); /* 3行均分 */
  gap: 2px; /* 可选：添加单元格间隙，增强井字棋视觉效果 */
  background: #000; /* 配合gap显示网格线 */
}

/* 单元格样式：填满网格区域，内容居中且不影响尺寸 */
.cell {
  width: 100%;
  height: 100%;
  outline: 2px solid red; /* 红色轮廓，符合需求 */
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* 内容过长时截断，避免撑大单元格 */
  padding: 8px; /* 可选：添加内边距，避免内容贴边 */
  box-sizing: border-box; /* 内边距不影响单元格尺寸 */
}

关键细节说明 #

• 90vmin：取视口宽度和高度中较小值的90%，确保网格在手机横屏/竖屏、桌面端都能完整显示，不会超出屏幕。
• aspect-ratio: 1/1：这是实现正方形容器的核心，无需依赖固定像素或百分比高度，容器会自动根据宽度调整高度，保持正方形。
• repeat(3, 1fr)：fr是网格布局的弹性单位，3个1fr会将容器的宽/高均分为3份，比33%更精准，不会因为四舍五入出现间隙或溢出。
• overflow: hidden：即使单元格内容动态变化（比如长文本、大尺寸元素），也不会撑大单元格，超出部分会被隐藏（也可换成text-overflow: ellipsis优化文本显示）。

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