如何在CSS Grid中创建完全正方形的响应式网格单元格？-css教程-PHP中文网

最简可靠的正方形网格方案是用 aspect-ratio: 1 / 1 配合 vh 单位（如 grid-template-columns: repeat(3, 33.33vh) 和 height: 100vh），避免百分比行高失效问题；内容动态时需 JS 测量真实宽度并重设列宽；旧浏览器可用 padding-bottom: 100% + 绝对定位兜底。

如何在css grid中创建完全正方形的响应式网格单元格？

直接用 aspect-ratio: 1 / 1 是最简、最可靠的起点，但仅靠它还不够——Grid 轨道分配和内容渲染顺序会破坏正方形效果，尤其在视口变化或内容动态加载时。

为什么 grid-template-rows: 33% 完全失效

百分比高度在 Grid 中不按你想象的方式工作。当父容器（比如 body）没有显式 height，grid-template-rows: 33% 33% 33% 实际计算为 0px，所有格子塌缩成内容高度。这不是 bug，是 CSS 规范定义的行为：百分比行高必须有可计算的块级祖先高度作为基准，而默认文档流里这个链路是断裂的。

常见错误现象包括：

格子高度随文字行数膨胀，宽高比完全失控
加了 height: 100% 但毫无反应
调试时发现 getBoundingClientRect().height 远大于预期

用 vh + aspect-ratio 构建视口锚定的正方形网格

这是目前兼容性好（Chrome 88+、Firefox 89+、Safari 15.4+）、无需 JS、且真正响应式的解法。核心是放弃依赖父高，改用视口单位建立尺寸基准，再用 aspect-ratio 锁定比例。

关键参数说明：

grid-template-columns: repeat(3, 33.33vh) —— 每列宽度 = 视口高度的 1/3；配合 height: 100vh，容器高度即为视口高度，自然推导出每格理论宽度 ≈ 高度
aspect-ratio: 1 / 1 —— 强制每个 .square 无论内容多少，都维持 1:1 宽高比
避免用 gap 过大：若设 gap: 20px，三列总宽会超过 100vh，导致横向滚动或换行；建议 gap: 0 或小值如 2px

示例最小可行代码：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

* { margin: 0; padding: 0; box-sizing: border-box; }
.cont {
  display: grid;
  grid-template-columns: repeat(3, 33.33vh);
  height: 100vh;
}
.square {
  aspect-ratio: 1 / 1;
  outline: 1px solid #333;
}