grid-cols-*类本身不启用grid布局，必须搭配grid基础类；默认1–12列无法满足5列等真实场景，需自定义gridtemplatecolumns；响应式断点链断裂会导致小屏回退block渲染。
直接说结论：grid-cols-* 类本身不启用 Grid 布局，必须搭配 grid 基础类；默认的 1–12 列无法满足 5 列、侧边栏+主区+工具栏等真实场景，必须自定义 gridTemplateColumns；响应式断点链一旦断裂，小屏就可能回退到 block 渲染——这不是 Bug，是 Tailwind 的设计逻辑。
为什么 grid-cols-5 在中屏下不生效或错位
常见错误现象：写了 md:grid-cols-5，但 DevTools 里 display 是 block，子项垂直堆叠。根本原因不是类没生成，而是父容器缺失网格上下文。
- 必须显式写
grid（即display: grid），grid-cols-5只负责grid-template-columns，不补display - 断点类必须覆盖完整状态链，例如
grid-cols-1 sm:grid-cols-2 md:grid-cols-5；漏掉sm，小屏会按浏览器默认 block 渲染 - 若父容器是
flex或block，即使子元素加了grid grid-cols-5，computed 样式仍为display: block - 用 DevTools 的 Layout 面板确认
grid-template-columns是否真实输出，别只看 class 名称
如何安全添加 5 列、混合轨道等非标准列定义
业务中常需 240px 1fr auto 或 repeat(5, minmax(0, 1fr))，而默认 grid-cols-5 只生成 repeat(5, minmax(0, 1fr))，且不支持像素+fr混用。
- 在
tailwind.config.js的theme.extend.gridTemplateColumns中添加键值对，值必须是合法 CSS 字符串：'5': 'repeat(5, minmax(0, 1fr))'、'sidebar-main-tools': '240px 1fr auto' - 含像素固定列（如
240px）时，建议配合grid-flow-row或显式grid-row，否则自动流模式下跨格子项易错行 - 自定义键名不支持响应式前缀（
sm:5无效），需单独定义：'sm:5': 'repeat(5, minmax(0, 1fr))'，并确保content配置扫描到该字符串 - 务必用
minmax(0, 1fr)，不用纯1fr，否则长文本或图片可能撑爆容器导致横向滚动
gap 和 col-span 失效、嵌套后错位的根本原因
这些看似随机的问题，其实都指向同一个机制：gap 和 col-span 的行为强依赖当前容器是否明确定义了 grid-template-columns，且不穿透嵌套层级。
-
gap-4只作用于当前 Grid 容器的直接子项；子项内部再套 Grid，它的gap与父级无关 -
col-span-2在嵌套 Grid 中失效，通常是因为外层容器没设grid-template-columns，导致内层 Grid 缺失列轨道参考 - 嵌套 Grid 时，每一层都必须独立声明
grid+ 对应的grid-cols-*或自定义列定义 - 不要指望一层
gap控制整棵树；每层 Grid 的间距需单独控制
最常被忽略的一点：Tailwind 的 grid-cols-* 不是“布局开关”，它只是列轨道定义器；真正决定是否进入 Grid 上下文的，永远是那个看似不起眼的 grid 类——漏掉它，后面所有列数、跨度、间隙都白配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
