正确写法是 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))) 或 auto-fit；需配合 gap、父容器明确宽度、img 设置 width:100%; height:100%; object-fit:cover; 并排查内外边距干扰。
minmax() 在 grid-template-columns 里怎么写才不塌
直接写 minmax(200px, 1fr) 是常见错误——它会让单列强行撑满整行，网格失去“多列”意义。真正起作用的是把它放进重复函数里，让浏览器知道“每列至少 200px、最多均分剩余空间”，同时允许自动换行。
-
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)))：推荐写法，auto-fill会尽可能塞满容器宽度，空列也保留（便于后续 hover 或 JS 操作） -
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)))：更常用，空列会被压缩掉，视觉上更紧凑 - 别漏掉
gap：否则图片边缘紧贴，响应式下容易误判为“没生效” - 注意父容器必须有明确宽度（比如
width: 100%或max-width），否则minmax缺少参照系，行为不可控
图片本身不拉伸变形的关键控制点
Grid 只管布局，不管图片怎么显示。常见现象是图片被横向拉宽、模糊或裁切——这和 object-fit、宽高比约束、以及是否设置 img 宽高有关。
- 给
img加width: 100%; height: 100%; object-fit: cover;：最稳妥，强制填满格子且不扭曲 - 如果想保持原始宽高比并居中显示，用
object-fit: contain;，但要预留空白区域 - 千万别只设
width: 100%不设height，否则 Grid 行高由内容撑开，网格错位 - 对固定比例图片（如 4:3），可配合
aspect-ratio: 4/3配合height: auto，但注意 Safari 15.4+ 才稳定支持
移动端小屏下格子太少甚至只剩一列？检查这些隐性限制
不是 minmax 失效，而是容器内边距、图片外边距、或者最小宽度阈值卡住了换行逻辑。
- 确认没有全局重置样式把
margin或padding设得过大，挤压可用宽度 - 避免在
img上写死min-width或flex-shrink: 0，这会让 Grid 无法压缩列宽 -
minmax(200px, 1fr)中的200px是硬门槛，屏幕宽度 minmax(150px, 1fr) 或媒体查询降级 - 某些安卓 WebView 对
auto-fit支持不稳定，真遇到问题可加@supports (display: grid)特征检测兜底
Grid 布局和 srcset、sizes 怎么配合才不白忙
光靠 CSS 布局不能解决图片资源加载效率。Grid 列宽是动态的，但 sizes 属性需要提前告诉浏览器“这张图大概会显示多宽”，否则 srcset 选错分辨率，高清屏糊、小屏下下载大图。
- 用
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"这类表达式，对应你 Grid 在不同断点下的列宽占比 - 别写死
sizes="50vw"—— Grid 列数变化时，实际宽度早就不一样了 - 验证方法：Chrome DevTools → Network → 刷新后看图片请求的
Actual Width是否接近你sizes里声明的值 - 如果用
aspect-ratio+object-fit，sizes仍按容器宽度算，不用考虑高度
minmax 参数都要手动拖动窗口测三遍断点，再查一遍 Network 面板确认图片没加载错尺寸。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
