必须同时写grid和grid-cols-3才能触发网格布局，仅grid-cols-3无效；响应式需写全断点链，避免区间回退；自定义列数需配置gridtemplatecolumns，col-span-*按父容器轨道数计算。
grid-cols-3写了却还是单列堆叠？先看父容器有没有grid
光加grid-cols-3不会触发网格布局，它只设置grid-template-columns，不改display。90% 的卡点在这里。
- 必须同时写
grid（对应display: grid）和grid-cols-3，缺一不可 - 错误写法：
<div class="grid-cols-3"> → 没<code>grid，等于白写 - 正确写法：
<div class="grid grid-cols-3 gap-4"> <li>用 DevTools 的 Computed 面板确认<code>display确实是grid，不是block或flex -
gap-4也依赖这个前提——非grid/flex容器里，gap完全无效 - 移动端优先推荐写法：
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列：在
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，否则长文本会撑爆容器引发横向滚动 - 若父容器是
grid-cols-2，再写col-span-3→ 超出网格，可能触发横向滚动 - 嵌套网格中，
col-span-*只对**直系父容器**的列轨道起作用，不穿透层级 -
row-span-full需要父容器显式定义行数（如grid-rows-4），否则行为不可控 - 调试时临时加
outline: 1px solid red到父容器，看清真实网格区域边界
响应式断点漏了一层，平板就变单列？写全断点链
sm:grid-cols-2 md:grid-cols-3中间没写md之前的断点，640px–768px 区间就会回退到未定义状态，浏览器按block渲染。
要5列、侧边栏+主内容+工具栏？别硬凑grid-cols-5，得自定义gridTemplateColumns
默认grid-cols-1到grid-cols-12全是repeat(n, minmax(0, 1fr)))，没法满足混合单位、非整数列等真实需求。
col-span-3跨列失效或撑破布局？它数的是轨道数，不是子元素个数
col-span-3意思是“占满当前网格定义的3个列轨道”，如果父容器只有2列轨道，它就会溢出边界。
grid类和断点链的显式声明——Tailwind 不做隐式补全，也不维护继承关系，每个类都是独立开关。写完记得打开 DevTools 看 computed style，别只盯着 class 名字。
