Grid是唯一原生支持二维对齐的方案，用grid-template-columns+aspect-ratio可实现等宽等高；Flex难真正等高，需额外约束高度；图片应设宽高属性防抖动，加loading="lazy"优化LCP；旧浏览器需@supports fallback。
用 display: grid 实现等宽等高最直接
Grid 是唯一原生支持二维对齐的方案，不用 hack 就能保证所有图片容器尺寸一致。关键不是靠 width 和 height 硬设，而是用 grid-template-columns + aspect-ratio 控制结构。
-
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))—— 每列最小 200px，自动填满，列数随容器变 - 给每张图的包裹容器（比如
<figure>或<div>）加aspect-ratio: 1 / 1，强制正方形，现代浏览器全支持 - 图片本身设
width: 100%; height: 100%; object-fit: cover;，避免拉伸或留白 - 统一用
gap: 12px控制间距，别混用margin，否则 Grid 会误算轨道尺寸
flex 能等宽但难真正等高
Flex 是一维布局，flex: 1 只能保证宽度均分，高度由内容决定。若图片原始比例不同，高度就会参差不齐——除非你主动约束容器高度。
- 给每个图片外层加
min-height或固定height，再配合object-fit: cover - 必须加
min-width: 0，否则 Flex item 默认最小宽度是内容宽度，会阻止缩小导致溢出 - 如果父容器高度固定（如
height: 200px），img设height: 100%才有效；只设width: 100%不管用 - 小屏换行时，
flex-wrap: wrap后每行高度仍可能不一致，需额外用align-content: flex-start避免空隙错位
图片本身不设 width 和 height 会抖动
HTML 中省略 width 和 height 属性，浏览器渲染时无法预留空间，图片加载后重排（layout shift），尤其头像墙或瀑布流场景下用户滚动时明显跳动。
- 哪怕用
aspect-ratio，也建议同时写上width和height（如width="200" height="200"），既提升 SEO 又助 SSR 渲染稳定 -
loading="lazy"必须加，否则首屏加载大量图片会阻塞主线程，实测 12 张图未加 lazy 时 LCP 延迟超 2.4s - 不要依赖 JS 计算尺寸来“补”宽高，CSS 已足够，JS 补只会增加 TTI 延迟
旧浏览器 fallback 要小心处理
aspect-ratio 在 Safari 15.4+、Chrome 88+、Firefox 89+ 才支持，IE 完全不支持。真要兼容 IE11，得退回到 padding-top: 100% + 绝对定位的老办法。
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (aspect-ratio: 1 / 1)包裹现代写法，里面写 Grid + aspect-ratio - 外面写 fallback：容器设
position: relative，子div设padding-top: 100%，img绝对定位并top: 0; left: 0; width: 100%; height: 100% - 别用
float做 fallback，清除浮动容易漏，且无法响应式折行
