<p>必须同时添加 grid 类才能启用网格布局，因为 grid-cols-* 仅设置 grid-template-columns，不改变 display 属性；若父容器 display 为 block 或 flex，则网格列定义无效。</p>
光写 grid-cols-3 不会触发网格布局，必须同时加 grid 类——这是 90% 初学者卡住的第一步。
为什么 grid-cols-* 加了却还是单列堆叠
根本原因是父容器没开启 Grid 上下文。grid-cols-3 只生成 grid-template-columns: repeat(3, minmax(0, 1fr)))，但若容器的 display 是 block 或 flex，这条规则完全不生效。
- 必须显式加
grid（对应display: grid）或inline-grid - 检查浏览器 DevTools 的 Computed 标签页，确认
display真的是grid - 别把
grid-cols-*错加在 Flex 子项上——它只对直系 Grid 容器有效 - 如果用了
gap-4却没看到空隙，大概率也是因为缺grid，gap在非 Grid/Flex 容器里会被忽略
grid-cols-2 和 grid-cols-[200px_1fr] 的行为差异
grid-cols-2 是等分弹性列，grid-cols-[200px_1fr] 是手动定义轨道宽度，二者底层逻辑不同，不能混用预期。
-
grid-cols-2→grid-template-columns: repeat(2, minmax(0, 1fr))，列宽随容器缩放，内容收缩时不会溢出 -
grid-cols-[200px_1fr]→ 必须启用 JIT 模式，且整个值要加方括号、空格替换成下划线：grid-cols-[200px_1fr]，否则构建失败 -
grid-cols-[repeat(3,_1fr)]这种写法默认不生效，Tailwind 不解析 CSS 函数，得靠插件或自定义theme.extend.gridTemplateColumns - 超过 12 列别硬凑
grid-cols-16，直接用grid-cols-[1fr_1fr_1fr_...]更可控
响应式列数切换时错位或回退
断点类不是“增强”，而是“覆盖”；漏掉某个断点，就会回退到上一个生效的类，而不是自动跳过。
立即学习“前端免费学习笔记（深入）”；
- 写
grid-cols-1 md:grid-cols-3，那在sm（640px）到md（768px）之间仍是单列——这个区间常被忽略，导致平板显示异常 - 如果项目自定义了
theme.screens，比如删了sm或改了md阈值，md:grid-cols-3就可能完全不生成 CSS - 移动端优先布局建议写全：
grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4，不要省略中间断点 -
grid-cols-3本身无响应性，它等价于sm:grid-cols-3，而很多项目关闭了sm断点，默认只从md开始启用
col-span-* 跨列失效或撑破布局
col-span-3 表示“跨越 3 个列轨道”，不是“占满 3 个子元素宽度”。它的行为强依赖父容器当前定义的列轨道数。
- 若父容器是
grid-cols-2，再写col-span-3，该子项就会超出网格边界，可能引发横向滚动或错位 - 嵌套网格中，
col-span-*只作用于**直接父容器**的列轨道，跟外层网格无关 - 跨列后内容高度不一致？加上
grid-auto-rows-min或显式设grid-rows-[1fr_1fr_1fr]，避免最后一行塌陷 - 调试时临时加
outline-2 solid red到父容器，看清真实网格区域，比靠眼睛猜靠谱得多
最易被忽略的一点：所有 grid-* 类都只是设置 CSS 属性，不接管布局语义。你得自己保证子元素数量、跨列/跨行逻辑、容器尺寸和断点配置全部对齐——Tailwind 不会替你做约束校验。
