核心写法是grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)))，auto-fill保留空位配合justify-content: center实现居中，而auto-fit会收缩空列破坏等宽；图片需object-fit: cover+width/height:100%+aspect-ratio:1/1确保裁切居中；gap宜用clamp()响应式控制，避免小屏溢出。
grid-template-columns: repeat(auto-fill, minmax(...))) 是核心写法
这行代码能自动计算每行放几个格子，不用媒体查询就能适配不同屏幕。关键在 auto-fill 和 minmax() 的组合：前者让浏览器尽可能多塞格子，后者设定每个格子最小宽度（比如 250px）和最大宽度（通常设为 1fr，即均分剩余空间）。
常见错误是写成 auto-fit —— 它会把空列收缩掉，导致最后一行格子被拉宽，破坏九宫格的“等宽”预期；而 auto-fill 保留空位，配合 justify-content: center 可让不满行的格子居中，视觉更稳定。
示例写法：
display: grid;<br>grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)));<br>gap: 12px;
图片必须用 object-fit: cover 防止变形
Grid 只管布局，不管内容怎么显示。如果图片原始宽高比不一致，直接塞进等宽等高的格子会拉伸或留白。必须给图片加 object-fit: cover，再配 width: 100%; height: 100% 才能真正“裁切居中显示”。
容易忽略的点：
• 不要用 img { width: 100%; height: auto }，这会让高度不统一，Grid 行高塌陷
• 父容器（Grid 项）需设 aspect-ratio: 1 / 1 或固定宽高，否则 object-fit 无基准
• Safari 旧版本不支持 aspect-ratio，可退化为 padding-top: 100% + position: relative 布局
移动端小屏下 gap 太大会撑破容器
gap 是固定值，小屏时多个 gap 累加可能超出容器宽度，触发横向滚动。不能只靠减小 gap，而应配合 max-width 和内边距控制。
实操建议：
• 给 Grid 容器设 padding: 0 12px，让左右留白抵消首尾 gap
• 将 gap 改为相对单位，如 gap: clamp(8px, 2vw, 16px)，避免小屏过宽
• 检查父容器是否意外设置了 min-width 或 white-space: nowrap，这两者会阻止 Grid 自动换行
九宫格 ≠ 必须 3×3，而是“最多 9 个可见”
所谓“九宫格图片墙”，实际指用户一眼看到约 3–4 列、滚动浏览更多内容。硬编码 grid-template-columns: repeat(3, 1fr) 在大屏上会显得稀疏，在小屏上则溢出。真正的响应式是让列数随容器宽度自然变化，从 1 列（手机）→ 2 列（平板）→ 3–4 列（桌面）→ 5+ 列（大屏）平滑过渡。
如果你真需要严格限制“最多显示 9 张”，那得靠 JS 控制渲染数量，CSS Grid 本身不负责数据截断。Grid 只解决“怎么排”，不解决“排哪些”。
最易被忽略的细节：Grid 容器若设了 overflow: hidden，但子项有阴影或 border，可能被裁掉——记得加 padding 或用 outline 替代部分 border。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
