多数情况应设为row；它按DOM顺序填充，适合有语义逻辑的图集，需配合固定行高或minmax(0,1fr)防塌陷，而dense虽可回填空隙但会打乱顺序，影响可访问性与SEO。
Grid自动填充图片时，grid-auto-flow设成dense还是row？
多数人卡在图片错位或留白上，根源常是grid-auto-flow选错了。默认row按顺序填，遇到大图占多行就会空出整列；而dense会回填前面的空隙，但可能打乱DOM顺序——对可访问性或SEO不利。
- 用
row：适合强调语义顺序（比如图集有编号/时间线），需配合grid-template-rows固定行高或minmax(0, 1fr)防塌陷 - 用
dense：仅当纯视觉优先、且图片无逻辑顺序时考虑，必须加grid-column: span 2等显式声明来控制大图，否则小图可能被挤到不可预期位置 - 别直接写
grid-auto-flow: dense就完事——它不解决图片宽高比不一致导致的网格线错位，得靠object-fit和容器约束兜底
aspect-ratio和object-fit怎么配着用才不拉伸变形？
响应式画廊最常见“图片被压扁”或“上下大片留白”，本质是容器尺寸变、图片原始比例没锁住。CSS aspect-ratio能强制容器比例，但IE不支持；object-fit管图片如何适应容器，但单独用没用。
- 容器上写
aspect-ratio: 4 / 3（或1 / 1），再加overflow: hidden防溢出 - 图片上必须设
width: 100%; height: 100%，否则object-fit不生效 -
object-fit: cover裁剪居中（推荐），contain等比缩放但必留白，fill强制拉伸（别用） - 老浏览器 fallback：用
padding-top百分比技巧模拟aspect-ratio，例如padding-top: 75%对应4:3
Grid响应式断点里，grid-template-columns用repeat(auto-fill, ...)还是repeat(auto-fit, ...)？
这两个看着像，行为差很远：auto-fill会生成所有可能列（哪怕空着），auto-fit会合并空列。实际项目里几乎都该用auto-fit。
-
repeat(auto-fit, minmax(280px, 1fr)))：最小280px，超出后均分剩余空间，空列自动消失 -
repeat(auto-fill, minmax(280px, 1fr)))：同样写法，但屏幕稍宽就多出一列空白格子，破坏布局节奏 - 别写死
280px——换成clamp(240px, 25vw, 320px)更适应不同设备 - 加
gap时注意：如果用gap: 1rem，容器padding得同步加，否则边缘图片贴边难看
图片加载慢或失败时，怎么避免网格塌陷或错位？
Grid依赖容器尺寸计算，图片异步加载完成前若没设宽高，容器高度为0，整个网格会抖动甚至错行。这不是JS能完全救的，得靠CSS预占位。
- 给
img加height: 100%和width: 100%，同时父容器（.gallery-item）必须有明确aspect-ratio或padding-top占位 - 用
loading="lazy"属性时，确保父容器有高度，否则懒加载触发前那一列全是空白 - 服务端返回图片时尽量带宽高字段，前端用
srcset+sizes匹配视口，减少重绘 - 真要兜底：用
::before伪元素+content加个灰色占位块，但别用background-color——它不占真实空间
复杂点在于，aspect-ratio、object-fit、grid-auto-flow三者必须咬合着调，改一个常牵出另两个问题。最容易被忽略的是图片加载过程中的容器高度稳定性——很多人只盯着最终效果，忘了用户看到的第一秒其实是空白或错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
