必须同时添加 grid 类才能启用网格布局，因为 grid-cols- 仅设置列定义但不改变 display 属性；若父容器 display 为 block 或 flex，则 grid-cols- 完全无效。

光写 grid-cols-3 不会触发网格布局，必须同时加 grid 类——这是 90% 初学者卡住的第一步。

为什么加了 grid-cols-* 还是单列堆叠

根本原因是父容器没开启 Grid 上下文。grid-cols-3 只生成 grid-template-columns: repeat(3, minmax(0, 1fr)))，但若容器的 display 是 block 或 flex，这条规则完全不生效。

• 必须显式加 grid（对应 display: grid）或 inline-grid
• 检查浏览器 DevTools 的 Computed 标签页，确认 display 真的是 grid
• 别把 grid-cols-* 错加在 Flex 子项上——它只对直系 Grid 容器有效
• 如果用了 gap-4 却没看到空隙，大概率也是因为缺 grid；gap 在非 Grid/Flex 容器里会被忽略

grid-cols-2 和 grid-cols-[200px_1fr] 的行为差异

grid-cols-2 是等分弹性列，grid-cols-[200px_1fr] 是手动定义轨道宽度，二者底层逻辑不同，不能混用预期。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• grid-cols-2 → grid-template-columns: repeat(2, minmax(0, 1fr))，列宽随容器缩放，内容收缩时不会溢出
• grid-cols-[200px_1fr] → 必须启用 JIT 模式，且整个值要加方括号、空格替换成下划线：grid-cols-[200px_1fr]，否则构建失败
• grid-cols-[repeat(3,_1fr)] 这种写法默认不生效，Tailwind 不解析 CSS 函数，得靠插件或自定义 theme.extend.gridTemplateColumns
• 超过 12 列别硬凑 grid-cols-16，直接用 grid-cols-[1fr_1fr_1fr_...] 更可控

响应式列数切换时错位或回退

断点类不是“增强”，而是“覆盖”；漏掉某个断点，就会回退到上一个生效的类，而不是自动跳过。

• 写 grid-cols-1 md:grid-cols-3，那在 sm（640px）到 md（768px）之间仍是单列——这个区间常被忽略，导致平板显示异常
• 如果项目自定义了 theme.screens，比如删了 sm 或改了 md 阈值，md:grid-cols-3 就可能完全不生成 CSS
• 移动端优先布局建议写全：grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4，不要省略中间断点
• grid-cols-3 本身无响应性，它等价于 sm:grid-cols-3，而很多项目关闭了 sm 断点，默认只从 md 开始启用

col-span-* 跨列失效或撑破布局

col-span-3 表示“跨越 3 个列轨道”，不是“占满 3 个子元素宽度”。它的行为强依赖父容器当前定义的列轨道数。

• 若父容器是 grid-cols-2，再写 col-span-3，该子项就会超出网格边界，可能引发横向滚动或错位
• 跨列前先确认父级已定义足够列轨道，例如 grid-cols-4 下才安全用 col-span-3
• col-span-full 仅在父容器有明确列数（如 grid-cols-4）时才可靠；否则行为退化为 grid-column: -1 / -1，受隐式网格影响大
• 嵌套 Grid 容器时，col-span-* 不穿透层级——子 Grid 的跨列只作用于自身容器，不影响外层

真正难的不是写多少类，而是每次加 grid-cols-* 前，都得问一句：父容器是不是真正在用 display: grid？DevTools 里有没有看到 grid-template-columns 输出？这两个问题漏一个，后面所有响应式和跨列都会悄悄失效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！