不能直接将 <picture> 作为 Grid 子项，因其无固有尺寸会导致 Grid 列塌缩和响应式断层；须用 <figure> 包裹并设 aspect-ratio 或宽高，<img> 需 width="100%" height="100%" 或 object-fit，且 fallback 图片必须兼容格式。
为什么不用 <picture> 单独配 Grid？
直接把 <picture> 当作网格项（grid item）塞进 display: grid 容器里，看起来能跑，但会出两类问题：一是 <picture> 本身不设宽高时，Grid 无法准确计算其尺寸，导致列宽塌缩或错位；二是 <source> 切换依赖浏览器对容器尺寸的感知，而 Grid 的自动列计算（如 auto-fit）可能在图片加载前就完成布局，造成响应式断层。
<picture> 必须包裹在语义化容器里再入 Grid
正确做法是用 <figure> 包一层，再让 <figure> 成为 Grid 子项。这样既保住了语义，又让 Grid 有稳定尺寸锚点：
-
<figure>设固定宽高或aspect-ratio，Grid 才能按预期分列 -
<picture>内部的<img>要加width="100%" height="100%"或object-fit: cover，否则拉伸或留白 - 别给
<picture>自己设width/height—— 它是“内容容器”，不是“尺寸容器”
<div class="gallery">
<figure>
<picture>
<source media="(min-width: 1200px)" srcset="large.webp" type="image/webp">
<source media="(min-width: 768px)" srcset="medium.jpg">
<img src="small.jpg" alt="描述文字">
</picture>
<figcaption>标题</figcaption>
</figure>
</div>
Grid 列数控制必须绕过 <picture> 的干扰
很多人试过 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 却发现列数卡死不动，原因往往是：<picture> 里的 <img> 没设 width 和 height 属性，导致浏览器无法提前知道其固有尺寸，Grid 就退化成按内容撑开——而图片加载是异步的。
- 给
<img>加显式width和height（比如width="600" height="400"），哪怕只是占位尺寸 - 或用 CSS 强制：
figure img { width: 100%; height: 100%; object-fit: cover; } - 避免在
<picture>上写max-width或flex类样式，它会覆盖 Grid 的列约束逻辑
移动端 fallback 和 JS 监控不能只靠 onerror
<picture> 在旧浏览器（如 Safari 13.1 以下）或某些安卓 WebView 中可能完全忽略 <source>，直接走 <img>，但若该 <img> 的 src 是 WebP 路径，就会静默失败——连 onerror 都不触发，因为请求发出去了，只是返回 404 或 MIME 不匹配。
立即学习“前端免费学习笔记（深入）”；
- 确保
<img>的src是广泛兼容格式（如 JPG/PNG），不是 WebP/AVIF - 批量监控用：
document.querySelectorAll('picture img').forEach(img => { if (img.naturalWidth === 0) console.warn('fallback img failed:', img.src); }); - 开发期加
<meta name="viewport" content="width=device-width, initial-scale=1">，否则某些 WebView 会错误缩放<picture>容器
真正麻烦的是 <picture> 和 Grid 共同作用下的 layout shift：图片加载慢时，Grid 已按 placeholder 尺寸排好列，等图一进来，高度突变，整行重排。解决它不靠 JS，靠提前占位——<figure> 必须带 aspect-ratio 或 padding-top 占位，这点比写多少 srcset 都关键。
