grid-cols-3 本身不构成九宫格，必须同时满足：父容器有 grid 类、子元素恰好9个、所有子项无跨行跨列干扰。
grid-cols-3 本身不会生成九宫格，它只定义三列；真正实现“3×3”需要父容器是 grid、子元素共9个、且无跨行跨列干扰——否则很可能渲染成3列但只有2行或1行。
为什么写了 grid-cols-3 却不是九宫格？
常见错误现象：grid-cols-3 加了，但页面只显示3个元素（垂直堆叠）、或6个元素（2行）、或全部挤在第一列。根本原因不是类名写错，而是布局条件没凑齐。
- 父容器缺失
grid类（即display: grid），grid-cols-3只设置grid-template-columns，不自动开启网格上下文 - 子元素不足9个，比如只有6个，那最多渲染2行 × 3列 = 6格，不是“空出3格”，而是直接结束
- 某个子项加了
col-span-2或row-span-2，破坏行列对齐节奏 - 父容器高度受限（如
max-h-60）或设置了grid-auto-flow: column，导致内容按列优先填充而非默认的行优先
grid-cols-3 + 什么才能稳定出3×3？
必须同时满足三个硬性条件：显式网格容器、足够数量子项、无轨道干扰。缺一不可。
- 父容器写全
grid grid-cols-3（不能只写grid-cols-3） - 确保有且仅有9个直系子元素（或用
*:nth-child(-n+9)等方式控制可见数） - 所有子项不带
col-span-*、row-span-*、grid-row、grid-column等定位类 - 若需等高，加
grid-auto-rows-min或grid-rows-[1fr_1fr_1fr]，避免因内容高度差异导致最后一行塌陷
响应式九宫格怎么写才不翻车？
直接写 grid-cols-3 是“全屏强制三列”，小屏会溢出或横向滚动。真要响应式，得逐断点声明，且注意断点覆盖逻辑。
- 移动端单列 →
grid-cols-1 - 平板两列 →
sm:grid-cols-2（640px起） - 桌面三列 →
md:grid-cols-3（768px起） - 别写
grid-cols-3 md:grid-cols-3：后者冗余；也别漏掉sm:，否则 640–767px 区间仍是单列，视觉断层 - 如果目标是“最小宽度下就三列”，用
grid-cols-3 sm:grid-cols-3，但得确认设计是否允许小屏三列
gap-4 没在九宫格里生效？先看 outline
gap 是网格容器属性，但它会被子元素自己的 margin 盖住——尤其当卡片用了 mb-4，看起来像间隙没加，其实是 margin 和 gap 叠加后视觉混乱。
- 临时加
outline-2 solid red到父容器，看清真实网格区域边界 - 子项统一用
mx-0 my-0清除外边距，让gap-4成为唯一间距来源 - 旧版 Safari 对
gap支持不全（iOS 15.4 之前），必要时拆成row-gap-4 col-gap-4 - 别用
padding模拟间隙：它会撑大子项尺寸，影响1fr分配逻辑
最易被忽略的是：九宫格本质是“3列 × 3行”的显式结构，而 grid-cols-3 只管列；行数由内容自然流式生成，除非你加 grid-rows-3 或用 grid-auto-rows 锁定高度，否则内容少或高度不均时，第三行根本不会出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
