grid类必须显式添加，否则grid-cols-无效；tailwind不自动设display: grid，需同时写grid和grid-cols-；响应式断点须连续覆盖；非标准列轨道需在配置中自定义gridtemplatecolumns。
grid类必须显式添加，否则所有grid-cols-*都无效
写了grid-cols-3却还是垂直堆叠，不是类没加载，而是父容器没开启网格上下文。Tailwind 不会自动补display: grid，它只生成grid-template-columns值。浏览器看到的仍是display: block，子项自然按流式布局排列。
- 正确写法：
grid grid-cols-3 gap-4——grid是前提，grid-cols-3和gap-4才起作用 - 错误写法：
grid-cols-3单独使用，或加在flex容器的子元素上（子元素不是直系网格容器） - 用 DevTools 的 Computed 面板确认
display是否真为grid，别只看 class 名称 - 如果父容器是
flex或block，即使子元素写了grid grid-cols-2，computed 里display大概率还是block
响应式断点必须连续覆盖，漏掉一个就可能回退到单列
md:grid-cols-3只在 md 及以上生效，640px–767px（sm 断点区间）若没定义，就会按浏览器默认行为渲染——通常是单列堆叠，不是“跳过”而是“未定义”。这和 CSS 媒体查询的覆盖逻辑一致，不是继承链。
- 安全写法：
grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4，从最小断点开始逐级覆盖 - 如果项目自定义了
theme.screens（比如删了sm或把md改成800px），那md:grid-cols-3可能完全不生效，得查配置 -
grid-cols-3本身等价于sm:grid-cols-3（仅当未修改默认断点时），不代表“所有尺寸都是三列” - 想只在 md+ 用三列？必须显式补上
sm:grid-cols-1，否则 sm 下行为不可控
要实现5列、侧边栏+主内容等非标准轨道，必须自定义gridTemplateColumns
grid-cols-5只是repeat(5, minmax(0, 1fr))，无法满足240px 1fr auto或minmax(200px, 1fr) 1fr这类混合轨道需求。Tailwind 默认不生成这些，硬写grid-cols-[240px_1fr_auto]还可能因 JIT 扫描遗漏而 build 失效。
- 最稳方式：在
tailwind.config.js的theme.extend.gridTemplateColumns里定义键值对，例如：'sidebar-main': '240px minmax(0, 1fr)' - 之后直接用
grid-cols-sidebar-main，不依赖 JIT 扫描，也不怕构建遗漏 - 值必须是合法 CSS 字符串，支持
fr、px、auto、minmax()；别漏minmax(0, 1fr)，纯1fr容易被长文本撑爆 - 自定义键名不支持响应式前缀（
sm:grid-cols-sidebar-main无效），需单独定义'sm:sidebar-main'并确保content路径包含该字符串
gap和col-span的行为强依赖当前容器的列轨道定义
gap-4只作用于当前 Grid 容器的直接子项，不会穿透嵌套层级；col-span-3表示“跨越当前容器定义的 3 条列线”，如果父容器只有 2 列，它就会溢出。这两个特性都要求容器有明确定义的grid-template-columns，否则表现不可预测。
-
gap不是margin的替代品：它不占布局空间，不影响轨道计算；用mb-4模拟行间距会破坏grid-auto-fit推算 - 嵌套 Grid 时，子容器的
gap和父容器无关，每个容器的gap独立生效 -
col-span-3在grid-cols-2容器里必然超界，浏览器会隐式创建额外列线，可能导致横向滚动 - 调试时临时加
outline: 1px solid red看真实网格区域边界，比靠视觉判断更可靠
grid-flow-row或grid-flow-col的配合、minmax(0, 1fr)的必要性、以及嵌套时每层容器都必须独立声明grid和对应grid-cols-*——没有隐式继承，也没有自动兜底。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
