必须显式添加grid类，否则grid-cols-*无效；响应式断点需连续覆盖；自定义列轨道应配置theme.extend.gridtemplatecolumns；gap和col-span仅作用于直接父grid容器。
grid类没加，grid-cols-*就等于没写
光写 grid-cols-3 但父容器没加 grid，子元素照样垂直堆叠——Tailwind 不会自动补 display: grid。它只生成 grid-template-columns 值，不接管布局模式切换。
必须显式组合：grid grid-cols-3 或 inline-grid grid-cols-2。漏掉 grid，DevTools 的 Computed 标签页里 display 仍是 block 或 flex，所有网格类都失效。
- 常见错例：
grid-cols-1 sm:grid-cols-2 md:grid-cols-3→ 小屏下无grid，grid-cols-1不触发网格行为 - 正确写法：
grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 - 调试时直接在父容器加
outline: 1px solid red，看是否框出网格区域；再对比加gap-4前后 outline 内部间距变化
响应式断点漏一个，列数就“掉链子”
Tailwind 断点是独立开关，不是继承链。漏掉 sm 或 md，对应视口区间就会回退到未定义状态（浏览器按默认 block 渲染），不是“跳过”，而是彻底失效。
比如只写 grid-cols-1 md:grid-cols-3，那么 640px–767px 这段（sm 到 md 之间）没有任何列声明，结果就是单列、无 gap、子项堆叠。
- 安全写法：从最小断点开始连续覆盖，如
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 是等分弹性列，但业务中常需 240px + 1fr + auto 这类组合。Tailwind 默认不生成这类轨道，且 grid-cols-5 在某些设备上错位，根本原因常是父容器缺 grid 或断点链断裂。
真正可控的方式是往 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——防长文本或图片撑爆容器导致横向滚动 - 含像素值的列（如
240px）需配合grid-flow-col或显式grid-row，否则自动流模式下跨格子项易错行 - 自定义键名不支持响应式前缀（
sm:grid-cols-5无效），需单独定义'sm:5'和'md:5'
gap 和 col-span 失效，大概率是嵌套层级没理清
gap 只作用于当前 Grid 容器的直接子项；col-span-3 表示“跨越当前容器定义的 3 条列线”，不是“占满 3 个子元素宽度”。二者行为都强依赖当前容器是否明确定义了列轨道，且不穿透嵌套层级。
- 外层是
grid-cols-4，里面嵌套一个grid grid-cols-2子容器，子容器内某项写col-span-3→ 跨度超限，浏览器隐式补列，视觉溢出 -
gap-4加在外层，不会影响内层 Grid 的子项间距；内层gap-2也不会改变外层的行列空隙 - 若需统一控制多层间距，建议用 CSS 自定义属性（如
--gap: 1rem）配合gap: var(--gap)，而非层层写 Tailwind 工具类 - 嵌套时每层 Grid 都必须独立声明
grid，不能靠父级“透传”
gap 作用域，都是各自独立的。一环没对齐，整个嵌套就错位。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
