真正自适应九宫格需用repeat(auto-fill, minmax(280px, 1fr)))，而非repeat(3, 1fr)；前者按容器动态列数、保最小宽，后者硬设三列致缩放失真；配合padding匹配gap、object-fit: cover防图片变形。
直接用 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) 就能实现真正自适应的九宫格，不需要媒体查询、不依赖 JavaScript，但必须理解 minmax() 和 auto-fill 的协作逻辑。
为什么 repeat(3, 1fr) 不是真自适应
固定列数写死为 3，会导致小屏上图片被严重压缩、大屏上留白过多。它只是“三列”，不是“尽可能塞满且每张图有合理最小宽度”的九宫格。
真实需求是：单张图宽度不低于 280px（适合手机横屏查看），同时在桌面端自动扩展到 4–6 列，而不是卡死在 3。
-
repeat(3, 1fr)→ 强制三列，缩放时子项拉伸变形 -
repeat(auto-fill, minmax(280px, 1fr)))→ 浏览器按容器宽度动态计算最多能放几列，每列至少 280px，剩余空间均分 - 关键点：
auto-fill会生成“空轨道”占位，确保网格线完整；换成auto-fit会合并空轨道，影响gap行为（尤其配合justify-content: center时）
grid-gap 和 padding 的边界陷阱
很多人加了 gap: 12px 后发现最外侧图片紧贴容器边缘，看起来不对称——这是因为 gap 只作用于轨道之间，不产生内外边距。
- 解决方法：给容器加
padding: 12px，值必须等于gap，才能视觉上“居中” - 错误写法：
margin: 12px→ 会导致整体偏移，破坏网格对齐基准 - 更稳妥的做法：用
padding+box-sizing: border-box（默认已启用）
图片如何不被拉伸变形？
Grid 控制布局，但图片自身尺寸仍可能撑破格子或失真。必须限制其行为：
- 给图片加
width: 100%; height: 100%; object-fit: cover;→ 填满格子且保持比例 - 避免只设
width: 100%而不设height，否则高度由内容决定，格子高度不一致 - 如果希望格子高度统一（比如瀑布流感弱化），可额外加
grid-auto-rows: 200px，但会牺牲响应性；更推荐让图片自身撑开，再用align-items: start防止底部错位
真正的难点不在写几行 CSS，而在于理解 minmax() 是“最小宽度优先”的弹性函数，以及 auto-fill 和 auto-fit 在空轨道处理上的差异——这两个点一旦选错，整个排版在不同设备上就会出现列数跳变或间隙错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
