正确写法是grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)))，需配合gap、父容器明确宽度、每个图片项设aspect-ratio及img设width:100%;height:100%;object-fit:cover;，并用包裹避免safari计算错误。
别从“零”开始写响应式图片布局——直接抄这三行 CSS 就能跑通 95% 的场景，但漏掉一个细节，手机上图片就挤成一条缝或留大片空白。
grid-template-columns: repeat(auto-fit, minmax()) 怎么写才不翻车
很多人复制 repeat(3, 1fr) 或 repeat(auto-fill, minmax(250px, 1fr))，结果小屏强制三列、图片被压扁，或者空列撑宽容器。关键不在“用不用 Grid”，而在参数组合逻辑。
-
auto-fit会收缩空列，只保留有内容的列；auto-fill则预留空位，容易导致网格外溢 - 最小宽度建议设为
250px（保证图片可读），太小如150px会让手机端列数过多、文字糊成一片 - 别写死
minmax(250px, 250px)—— 这等于锁死列宽，失去“自适应”意义 - 必须配合
gap控制间距；用margin模拟会导致网格对齐错乱，尤其 Safari 下表现不稳定
图片高度不一致时，如何避免网格塌陷
原始图宽高比不同，只设 height: 200px 会拉伸，设 height: auto 又让行高浮动、网格错位。现代解法靠两个属性协同：
- 给每个
.grid-item（不是img）加aspect-ratio: 4/3，强制统一比例，浏览器原生支持（Chrome 88+、Firefox 89+、Safari 15.4+） -
img上必须写width: 100%; height: 100%; object-fit: cover;，裁剪居中显示，不拉伸不变形 - 绝对别用
padding-top: 75%+position: absolute这套老方案——语义差、维护难、在 Grid 容器里计算更不可靠 - 必须用
<figure></figure>包裹img和figcaption，否则 Safari 对裸img的网格尺寸计算会出错
srcset + sizes 不生效？先查这三个地方
写了 srcset 却还是加载大图，90% 不是代码语法错，而是浏览器决策被误导：
- 没写
sizes：浏览器默认按100vw计算目标宽度，哪怕你图片实际只占容器 50%，它也倾向选大图 -
sizes值写死成"100vw"：忽略 padding/margin 或父容器max-width限制，导致计算值远大于渲染尺寸 - 服务端或 CDN 干预了请求头（比如强制返回 WebP 但没配好 Accept 头），浏览器根本没机会做选择
- 资源命名要带宽度描述符，例如
"photo-480.jpg 480w"，不能只写"photo-480.jpg"；2x描述符适用于固定像素比场景，w更适合响应式布局
为什么 <picture></picture> 不是可选项，而是必要项
当你要切换构图（比如移动端竖图、桌面端横图）或格式（WebP → JPG 降级），<img> 的 srcset 完全无能为力——它只能选“同一张图的不同尺寸”，不能换内容。
-
<source></source>是顺序匹配，第一个media和type同时满足的生效，条件之间是 AND 关系 - 最具体的规则放最前面，比如先写
<source media="(min-width: 768px) and (min-resolution: 2dppx)" type="image/webp"></source> -
<source></source>不支持alt，所有图文语义必须由最后的<img>提供，且src和alt都不能省 - 拼错
type="image/webp"（比如多写分号或大小写错误），整条<source></source>就被浏览器跳过
真正卡住人的从来不是语法，而是 aspect-ratio 和 object-fit 的配合时机、auto-fit 与 gap 的隐式依赖、以及 sizes 和真实渲染宽度之间的毫厘偏差——这些地方一松手，整个布局就滑向不可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
