应使用 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))) 实现响应式九宫格，auto-fill 保持列宽一致并保留空位，配合 gap 控制间距，子元素需内敛控制防溢出。
用 grid-template-columns 实现自动适配列数
九宫格不是固定 3×3，而是“最多 9 个格子、在不同屏幕下尽可能填满且不换行”。关键不在“九”，而在“响应式列数”。grid-template-columns 配合 repeat() 和 minmax() 才能真正响应：
display: grid;<br>grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)));
这里 280px 是单列最小宽度（比如卡片内容撑开所需），1fr 表示剩余空间均分。浏览器会自动计算能放几列，小屏放 1 列，中屏 2 列，大屏可能到 4 列——但总数仍由子元素个数决定，不是硬写死 9。
为什么不用 auto-fit 而用 auto-fill
两者都常被混用，但行为差异直接影响布局“留白感”：
-
auto-fill：不管有没有子元素，先按最小宽度占满所有可能轨道，空轨道也保留（视觉上是空白列） -
auto-fit：只生成有内容的轨道，空轨道会被压缩消失
做九宫格时，如果子项少于 9 个（比如只有 5 个），用 auto-fit 会导致它们拉宽占满整行，失去“格子感”；而 auto-fill 保持列宽一致，空位自然留白，更符合“网格”的预期。所以优先选 auto-fill。
必须加 gap，但别依赖 margin 控制间距
Grid 的间隙必须用 gap（或 row-gap/column-gap），不能靠子元素自己设 margin。否则会出现两个问题：
- 最后一行/列的外边距会多出一倍（因为 margin 不受网格约束）
- 响应式重排时，margin 不随列数变化缩放，容易溢出或错位
- IE 不支持
gap，但现代项目基本可忽略；若需兼容，得降级用padding+box-sizing: border-box包裹
推荐写法：
gap: 12px;<br>/* 不要这样：<br>item { margin: 6px; } */
移动端窄屏下内容溢出的常见原因
即使用了 minmax(280px, 1fr)，小屏依然可能横向滚动，通常是因为：
- 子元素内部有固定宽内容，比如未设置
max-width: 100%的图片或table - 父容器没设
width: 100%或被更高层white-space: nowrap影响 - 字体尺寸过大，导致文本撑宽卡片（可用
clamp()限制：font-size: clamp(0.875rem, 4vw, 1rem);）
最稳妥的兜底是给 grid 容器加：
width: 100%;<br>overflow-x: hidden;
但这只是遮掩，根因还是子元素没做好内敛控制。
真正难的不是写出那几行 grid，而是想清楚“最小列宽”到底由什么决定——是文字行宽？图片尺寸？还是交互热区？这个值定错了，后面所有响应逻辑都会偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
