用 css grid 实现订单商品多图平铺展示：grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) 自适应列数，gap: 8px 稳定间距，.thumb-item 用 aspect-ratio: 1/1 或伪元素 fallback 保证正方形，图片带 width/height 属性防抖动，语义化 包裹并配有意义 alt。
用 CSS Grid 实现订单商品多图平铺展示，核心是让图片在固定容器内自动等宽排列、不拉伸、不重叠、加载不抖动——不是靠 JS 计算列数，也不是用 float 或 table 硬凑。
用 auto-fit + minmax 实现自适应列数
订单页中商品缩略图数量不定（比如 1 张到 8 张），但希望在小屏显示 2 列、中屏 3 列、大屏 4 列，且每张图宽度一致。直接写死 grid-template-columns: 1fr 1fr 1fr 会出问题：图少时留白，图多时溢出。
正确写法：
-
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))—— 每列最小 120px，有空间就新增一列，图少时自动收缩为更少列数 - 搭配
gap: 8px控制图间距，比用 margin 更稳定（无外边距合并问题） - 容器加
width: 100%和max-width: 500px限制总宽，避免在超宽屏下铺得太散
图片防拉伸与尺寸统一
订单图常来自不同来源，原始宽高比不一。直接设 width: 100% 容易压扁或拉长。
- 给图片容器（如
.thumb-item）设aspect-ratio: 1/1，强制正方形布局（Chrome 103+ / Firefox 98+ 支持） - 老浏览器 fallback：
.thumb-item { position: relative; } .thumb-item::before { content: ""; display: block; padding-top: 100%; }，再把img设为position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; - 不推荐只写
height: 100px—— 小图会被拉伸，大图会被裁剪顶部
加载过程不抖动的关键处理
订单页常含多张图，异步加载时若没占位，卡片高度反复变化，用户正在滑动就会“跳”。
- 必须为每张图提供宽高属性：
<img src="a.jpg" style="max-width:90%" style="max-width:90%" alt="商品图">，浏览器能按比例预留空间 - 或用
srcset+sizes配合aspect-ratio，兼顾响应式与占位 - 禁用
background-image做缩略图——读屏器和爬虫无法识别，也不支持原生 loading 状态
语义与可访问性补充
订单中的多图不是装饰，而是关键信息（如不同角度、细节、色差），需保障可读性和可操作性。
- 用
<figure><img><figcaption>正面</figcaption></figure>包裹每张图，明确图文关系 - 为每张图写有意义的
alt，例如alt="iPhone 15 Pro 金色正面实拍"，不要写“图片1” - 如果支持点击放大，给
figure加role="button" tabindex="0"，并绑定Enter/Space事件
