必须显式添加grid类才能启用网格布局，仅grid-cols-*无效；断点需连续覆盖避免未定义；自定义列轨道应通过配置文件扩展；gap和col-span仅作用于直系容器。
grid类没加，grid-cols-*就等于没写
写了grid-cols-3但子元素还是垂直堆叠？不是类没加载，而是父容器缺少grid——Tailwind 不会自动补display: grid。它只生成grid-template-columns值，布局模式得你亲手开。
必须显式组合：grid grid-cols-3 gap-4；单独用grid-cols-3或塞进flex容器里，computed 样式里display仍是block或flex。
调试时直接加outline: 1px solid red看是否框出网格区域；再对比加gap-4前后内部间距变化，能快速确认网格上下文是否建立。
响应式断点漏一个，列数就“掉链子”
Tailwind 断点是独立开关，不是继承链。只写grid-cols-1 md:grid-cols-3，那 640px–767px（sm 区间）就没有任何列声明，浏览器按默认block渲染，结果就是单列堆叠，不是“跳过”，而是彻底未定义。
安全写法是从最小断点开始连续覆盖：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这类组合。Tailwind 默认不生成，且硬写grid-cols-[240px_1fr_auto]依赖 JIT 扫描，build 后容易失效。
最稳方式是往tailwind.config.js的theme.extend.gridTemplateColumns里加键值对：
module.exports = {
theme: {
extend: {
gridTemplateColumns: {
'5': 'repeat(5, minmax(0, 1fr))',
'sidebar-main': '240px minmax(0, 1fr)',
'fluid-auto': 'minmax(200px, 1fr) minmax(300px, 2fr) auto'
}
}
}
}
之后就能直接用grid-cols-5或grid-cols-sidebar-main，不依赖 JIT，build 后也稳定。
务必用minmax(0, 1fr)，不是单纯1fr——防长文本或图片撑爆容器导致横向滚动。
gap和col-span只作用于直系 Grid 容器
gap-4只影响当前 Grid 容器的直接子项；若子项内部也是 Grid，它的gap与父级无关——别指望靠一层gap控制全树。
col-span-3表示“跨越 3 个列轨道”，不是“占满 3 个子元素宽度”。如果父容器是grid-cols-2，再写col-span-3，该子项就会超出网格边界，可能引发横向滚动或错位。
嵌套网格必须每层都独立声明grid；gap、place-items这些属性不穿透层级，作用域非常严格。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
