必须显式添加grid类，否则grid-cols-*无效；Tailwind不自动设置display: grid，仅生成grid-template-columns值，父容器display为block或flex时网格布局不生效。
父容器没加 grid 类，grid-cols-* 就不生效
写了 grid-cols-3 却还是垂直堆叠，不是类没加载，而是浏览器看到的 display 仍是 block 或 flex。grid-cols-3 只生成 grid-template-columns: repeat(3, minmax(0, 1fr)))，但不会改 display 属性。必须显式加 grid（对应 display: grid）或 inline-grid。
调试时直接打开 DevTools 的 Computed 面板，搜 display —— 如果不是 grid，那所有网格类都白写了。
- 错误写法：
grid-cols-1 sm:grid-cols-2 md:grid-cols-3 - 正确写法：
grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 - 别把
grid类错加在子元素上：它只对直系父容器起作用
sm、md 断点漏一个，列数就“掉链子”
Tailwind 断点是独立开关，不是继承链。漏掉某个断点，那段视口区间就回归浏览器默认渲染（通常是单列堆叠），不是“跳过”，而是彻底没定义。
比如只写 grid-cols-1 md:grid-cols-3，那 640px–767px（即 sm 到 md 之间）没有任何列声明，结果就是单列、无 gap、子项堆叠。
立即学习“前端免费学习笔记（深入）”；
- 安全写法：从最小断点开始连续覆盖，如
grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 - 检查
tailwind.config.js中theme.screens是否被自定义过——比如把sm改成500px，那sm:grid-cols-2就只在 ≥500px 生效 - 如果真要跳断点（如只在
md+用三列），得明确补上sm:grid-cols-1，否则sm下行为不可控
想用 5 列或混合轨道，grid-cols-5 不够用
grid-cols-5 是等分弹性列，生成的是 repeat(5, minmax(0, 1fr))。业务中常需 240px 1fr auto 或 minmax(200px, 1fr) 1fr 这类组合，Tailwind 默认不生成，硬写 grid-cols-[240px_1fr_auto] 还可能因 JIT 扫描遗漏而 build 失效。
最稳的方式是在 tailwind.config.js 的 theme.extend.gridTemplateColumns 里定义：
module.exports = {
theme: {
extend: {
gridTemplateColumns: {
'sidebar-main': '240px minmax(0, 1fr)',
'5': 'repeat(5, minmax(0, 1fr))',
'fluid-auto': 'minmax(200px, 1fr) minmax(300px, 2fr) auto'
}
}
}
}
- 之后就能直接用
grid-cols-sidebar-main或grid-cols-5，不依赖 JIT 扫描，build 后也稳定 - 值必须是合法 CSS 字符串，支持
fr、px、auto、minmax() - 务必用
minmax(0, 1fr)，不是单纯1fr——防长文本或图片撑爆容器
gap 和 col-span 失效，根本不是类写错了
gap-4 和 col-span-3 的行为强依赖当前容器是否明确定义了列轨道（grid-template-columns），且不穿透嵌套层级。
-
gap-4只作用于当前 Grid 容器的直接子项；若子项内部也是 Grid，它的gap与父级无关 -
col-span-3表示“跨越 3 个列轨道”，不是“占满 3 个子元素宽度”。若父容器是grid-cols-2，再写col-span-3，该子项就会超出网格边界，可能引发横向滚动 - 嵌套 Grid 时，别指望靠一层
gap控制全树；每个 Grid 容器要单独配gap
真正容易被忽略的是：这些失效现象背后，几乎总是同一个原因——父容器缺 grid 类，或断点链断裂导致列轨道未定义。先确认 Computed 里的 display 和 grid-template-columns 是否真实存在，再调样式。
