必须显式加grid类，否则grid-cols-不生效；因grid-cols-仅设置grid-template-columns，不改变display值，若父容器为block或flex则规则被忽略。
必须显式加 grid 类，否则所有 grid-cols-* 都不生效——这是 90% 的人第一次写 Grid 时卡住的唯一原因。
为什么加了 grid-cols-3 还是单列堆叠
因为 grid-cols-3 只设置 grid-template-columns，但不会改变容器的 display 值。如果父容器是 block 或 flex，这条规则完全被忽略。
- 用浏览器 DevTools 的 Computed 标签页确认
display: grid真实存在 - 别把
grid-cols-*加在 Flex 子项上——它只对直系 Grid 容器有效 - 检查是否被其他 CSS（比如外层
flex）覆盖了display声明 - 确保页面有正确的
<meta name="viewport" content="width=device-width, initial-scale=1">
grid-cols-2 和 grid-cols-[200px_1fr] 的行为差异
前者生成 repeat(2, minmax(0, 1fr)))，列宽随容器弹性缩放；后者是手动定义轨道，必须启用 JIT 模式，且整个值要包在方括号里、空格替换成下划线。
-
grid-cols-[200px_1fr]在非 JIT 模式下不会生成 CSS -
grid-cols-[repeat(3,_1fr)]默认不解析，Tailwind 不支持 CSS 函数语法 - 超过 12 列别硬凑
grid-cols-16，直接用grid-cols-[1fr_1fr_1fr_...]更可控 - 自定义列配置需写进
tailwind.config.js的theme.extend.gridTemplateColumns
响应式断点切换时错位或回退
断点类不是“增强”，而是“覆盖”：漏掉某个断点，就会回退到上一个生效的类，而不是跳过。
- 写
grid-cols-1 md:grid-cols-3，那在sm（640px）到md（768px）之间仍是单列——这个区间常被忽略 - 移动端优先建议写全：
grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 - 若项目自定义了
theme.screens（比如删了sm或改了md阈值），md:grid-cols-3就可能完全不生成 CSS -
sm:表示 ≥640px，不是“仅在小屏”，所以sm:flex在lg下也生效
col-span-* 跨列失效或撑破布局
col-span-3 表示跨越 3 个列轨道，不是“占满 3 个子元素宽度”。它的行为强依赖父容器当前定义的列轨道数。
- 若父容器是
grid-cols-2，再写col-span-3，该子项就会超出网格边界，可能引发横向滚动 - 跨列前先确认父级已定义足够列轨道，例如用
grid-cols-4再配col-span-3 - 需要小屏不跨列、大屏才跨列？写成
md:col-span-2，而非无前缀的col-span-2 - 内容含长段落时，Grid 默认不折行，得额外加
break-words或overflow-wrap: break-word
真正难的不是写对 class，而是你是否清楚每个子项在不同断点下的最小可读尺寸、是否预判了内容增长后对网格轨道的挤压——这些没法靠工具类自动兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
