aspect-ratio: 1/1 在 grid 中常不生效，因其是后备推导规则而非强制样式；需满足宽度可算、高度未被锁死、align-self: start、width: 100% 且无任何 height 相关声明。

aspect-ratio: 1 / 1 在 Grid 中不是“开箱即用”的正方形开关，它只在宽度可算、高度未被锁死时才生效；写上却没效果，几乎全是布局干扰导致的静默失效。

为什么 aspect-ratio: 1 / 1 在 Grid 里常不生效

它本质是“宽高推导规则”，不是强制样式——浏览器只在子项的宽高完全由上下文决定时介入计算。一旦有以下任一情况，aspect-ratio 就直接退场：

• grid-item 上写了 height、min-height、max-height（哪怕值是 auto）
• 父容器设了 grid-auto-rows: 200px 或 grid-template-rows: 100px 100px 100px
• align-items: stretch（Grid 默认值）把子项拉满行高，覆盖比例逻辑
• 子项用了 display: inline 或 display: table-cell（不支持 aspect-ratio）
• 把 aspect-ratio 错误地写在 Grid 容器上（它只对单个 item 生效）

Grid 列定义怎么写才不和 aspect-ratio 冲突

列宽必须能提供可靠基准，否则 aspect-ratio 算不出高度。关键不是“几列”，而是“宽度是否可预测”：

• ✅ 推荐：grid-template-columns: repeat(3, 33.3vh) —— 以视口单位锚定，脱离父高依赖
• ✅ 可响应：grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))) —— 列宽弹性，但需配合 width: 100% 和 align-self: start
• ❌ 避免：grid-template-columns: 200px 200px 200px —— 固定像素列宽 + aspect-ratio 能工作，但失去响应性
• ❌ 更糟：grid-template-columns: repeat(3, 1fr) 单独使用 —— 它只分配列宽，不约束行高，aspect-ratio 缺少宽度来源时可能失效

每个 grid-item 必须加的最小配置

光写 aspect-ratio: 1 / 1 远不够。以下四条缺一不可，否则格子大概率塌陷或拉伸：

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

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

下载

• 显式声明 width: 100%（让 item 严格跟随所在列宽）
• 加 align-self: start（释放 align-items: stretch 的拉伸控制权）
• 彻底移除所有 height、min-height、max-height 声明（包括 height: auto）
• 若内容含图片，必须套一层容器设 aspect-ratio，<img> 自身加 width: 100%; height: 100%; object-fit: cover;

旧浏览器降级必须结构分离，不能只靠 @supports

旧版 Safari（≤15.3）、微信 X5 内核会静默忽略 aspect-ratio，且 @supports (aspect-ratio: 1 / 1) 在它们身上返回 true，检测完全不可靠。

真正有效的降级方案是结构兜底：

• 外层容器设 position: relative; width: 100%; height: 0; 和 padding-bottom: 100%;
• 内容层用 position: absolute; top: 0; left: 0; width: 100%; height: 100%;
• CSS 顺序必须是：aspect-ratio: 1 / 1 在前，padding-bottom: 100% 在后

最易被绕开的一点：即使网格形状完美，内容本身（如未约束的图片、换行失控的长文本）仍会撑破格子——aspect-ratio 管形状，不管内容铺法，这两件事得分开处理。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！