你明明写了grid-cols-3，怎么页面上还是单列堆叠？很多人第一反应是去查CSS，其实90%的问题出在一个细节上——父容器没有加grid类。Tailwind CSS 的网格布局，不是靠一个类名就能自动激活的，它需要你明确声明两样东西：display: grid 和列数定义。缺一个，就等于白写。
grid-cols-3写了却还是单列堆叠？先看父容器有没有grid
光加grid-cols-3不会触发网格布局——它只设置grid-template-columns，压根不改display属性。这也是新手最常踩的坑，没有之一。
- 必须同时写上
grid（对应display: grid）和grid-cols-3，缺一不可 - 错误写法：
→ 没grid，等于白写，元素还是块级堆叠 - 正确写法：
，这样网格才真正生效 - 用 DevTools 的 Computed 面板确认一下
display是不是grid，别只看 class 列表 - 顺带一提，
gap-4也需要这个前提——非grid或flex容器里，gap是完全无效的
响应式断点漏了一层，平板就变单列？写全断点链
你只写了sm:grid-cols-2 md:grid-cols-3，中间 640px–768px 这个区间呢？浏览器无从知晓，直接回退到未定义状态，按block渲染，单列又回来了。这其实是个逻辑漏洞——断点链没写全，中间就会断层。
- 移动端优先推荐写法：
grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4，每个断点都显式声明，不留空白区间 - 别省略中间断点，尤其当项目自定义过
theme.screens时，sm可能根本没启用，写上去等于没写 - 注意：
grid-cols-3本身等价于sm:grid-cols-3（仅默认配置下），并不是“所有尺寸都三列”，它只覆盖默认的移动端断点 - 最好检查一下
tailwind.config.js里的screens，确认你写的前缀真能对应到实际屏幕宽度
要5列、侧边栏+主内容+工具栏？别硬凑grid-cols-5，得自定义gridTemplateColumns
默认的grid-cols-1到grid-cols-12，全部是repeat(n, minmax(0, 1fr))——等分、均匀、没有混合单位。但真实项目里，你需要的是240px 1fr auto或者非整数的5列？默认做不到，得自己动手。
- 想每行5列：在
tailwind.config.js的theme.extend.gridTemplateColumns里加'5': 'repeat(5, minmax(0, 1fr))'，然后直接用grid-cols-5 - 想要
240px 1fr auto这种混合布局：加'sidebar-main-tools': '240px 1fr auto'，再用grid-cols-sidebar-main-tools调用，命名清晰又好维护 - 如果不想改配置文件，也可以用任意值语法
grid-cols-[240px_1fr_auto]，但前提是开启 JIT 模式，而且空格必须转成下划线 - 关键细节：
minmax(0, 1fr)比纯1fr更稳妥——后者遇到长文本会撑爆容器引发横向滚动，前者能自动收索
col-span-3跨列失效或撑破布局？它数的是轨道数，不是子元素个数
col-span-3的意思是“占满当前网格定义的3个列轨道”。如果父容器只有2列轨道，你写col-span-3，必然超出边界，触发横向滚动或布局错乱。这不是 Tailwind 的 bug，是你没算对轨道数。
- 若父容器是
grid-cols-2，再写col-span-3→ 超出网格范围，可能撑出横向滚动条 - 嵌套网格中，
col-span-*只对**直系父容器**的列轨道起作用，不会穿透层级影响到外层网格 row-span-full需要父容器显式定义行数（比如grid-rows-4），否则它的行为不可控，因为行数没被约束- 调试时有个小技巧：临时给父容器加上
outline: 1px solid red，一眼就能看清网格区域的真实边界，问题出在哪儿就一目了然了
实际项目里最常被忽略的，就是grid类和断点链的显式声明——Tailwind 不做隐式补全，也不维护任何继承关系，每个类都是独立开关。写完记得打开 DevTools 看 computed style，别只盯着 class 名字。记住，不是 Tailwind 不灵，是你没写全。
