正确写法是grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)))，配合img{width:100%;height:auto;}，确保图片等比缩放不拉伸、不溢出，auto-fit自动填满且不留空列。
用 grid-template-columns: repeat(auto-fit, minmax(...))) 控制列数和最小宽度
直接写 repeat(auto-fit, 1fr) 不行——图片会拉伸变形，因为 1fr 只管分配剩余空间，不管内容比例。关键得让每列有「最小宽度下限」，同时允许浏览器根据容器自动增减列数。
常见错误是写成 repeat(auto-fit, minmax(200px, 1fr)))，这会导致图片被强行压缩进固定宽高比的格子，依然可能变形。
- 正确思路：把最小宽度设为一个合理值（比如
250px），但让高度由图片自身宽高比决定，不锁死 - 用
minmax(250px, 1fr)表示「每列至少 250px，最多占满可用空间」，auto-fit会删掉空列，让实际列数随容器缩放 - 必须配合
img { width: 100%; height: auto; }，否则图片默认按原始尺寸渲染，撑破网格项
图片不溢出、保持比例的关键：网格项要设 overflow: hidden 吗？
不一定需要。只要图片本身设置了 width: 100%; height: auto;，它就会等比缩放到父容器宽度，并自动计算高度，不会溢出。
但如果网格项（grid-item）设置了固定高度（比如误加了 height: 200px），或者用了 object-fit 错误值（如 object-fit: cover），就容易裁剪或失真。
- 避免给网格项设固定
height或min-height - 不要对
img使用object-fit（它只对background-image或替换元素如video有效） - 如果图特别高，想限制最大高度，可加
max-height: 400px;到图片上，再配height: auto;，它仍会等比缩放
auto-fit 和 auto-fill 在这里有什么实际区别？
区别体现在空列处理上：当容器宽度不足以放下一个完整 minmax() 单元时，auto-fit 会收缩已有的列并填满整行；auto-fill 则保留空列位置（显示为 gap 空白），可能导致最后一行只剩半格。
对图片网格来说，auto-fit 更实用——用户更希望图片均匀铺满，而不是留一排空隙。
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))); /* ✅ 推荐：紧凑、自适应 */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))); /* ❌ 可能出现右侧大片空白 */
响应式断点还用不用？
可以不用额外媒体查询——auto-fit + minmax() 本身就是响应式核心机制。但要注意 minmax() 的第一个参数（最小宽度）不能太小，否则小屏上单列过窄，图片糊成一团。
- 手机端建议最低设
180px，平板可设220px，桌面保持250px - 如果真要精细控制，只在极端情况加媒体查询，比如：
@media (max-width: 480px) { grid-template-columns: 1fr; } - 别忘了设
gap，比如gap: 1rem;，不然图片挤在一起
图片等比显示这件事，真正卡住人的往往不是 Grid 语法，而是忘了图片自己也要“听话”：width: 100% 是必须的，height: auto 是不能省的，而网格容器的 minmax() 第一个值，得是你愿意让单张图在最小屏幕上占的宽度——再小，就该换布局了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
