怎样在移动端用纯CSS实现自适应宽高的正方形网格？-css教程-PHP中文网

用aspect-ratio: 1配合grid-auto-rows: 1fr和repeat(auto-fit, minmax(120px, 1fr))可实现列宽驱动行高的自适应正方形网格，无需JS或padding-top/vw等兼容性差的方案。

怎样在移动端用纯css实现自适应宽高的正方形网格？

直接用 aspect-ratio: 1 + grid-template-columns: repeat(auto-fit, minmax(...)) 就能搞定，不需要 JS，也不依赖视口单位（如 vw）或 padding 技巧。

为什么不用 padding-top 或 vw 单位？

移动端屏幕宽度变化频繁，padding-top: 100% 要求父容器有明确宽度、且子元素必须用 position: relative + 内容绝对定位，结构臃肿；height: 50vw 则会让正方形随视口宽度缩放，但高度可能超出容器、破坏网格对齐。两者在嵌套网格或 flex 容器中极易失效，且无法响应列数变化。

padding-top 的百分比始终基于父容器宽度，若父容器是 grid track，其宽度不等于内容宽度，计算会错乱
vw 单位无视父容器限制，比如在 modal 或 scrollable 区域里，正方形可能宽过容器本身
两者都无法让「行高自动匹配列宽」，这是网格正方形最核心的约束

用 `aspect-ratio` + `auto-fit` 实现真正自适应网格

现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）已稳定支持 aspect-ratio，它能让单个网格项强制维持宽高比，再配合 grid-auto-rows: 1fr，浏览器会以列宽为基准反推出行高，实现像素级一致。

设置 grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))：最小项宽 120px，小屏自动收缩为 1 列，大屏铺开
给每个网格项加 aspect-ratio: 1，并确保 box-sizing: border-box
必须设 grid-auto-rows: 1fr，否则行高不会跟随列宽变化（仅设 grid-template-rows 静态值会失效）
gap 替代 margin，避免边框/内边距撑出溢出（尤其在 border 存在时）

#grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-auto-rows: 1fr;
  gap: 8px;
}
.grid-item {
  aspect-ratio: 1;
  background: #eee;
  border: 1px solid #ccc;
  box-sizing: border-box;
}