栅格不生效主因是未显式加grid类；grid-cols-2在手机单列因默认等价sm:grid-cols-2且sm断点常被禁用；gap-4需配合display:grid；col-span-3须确保≤当前grid-cols-*列数。
必须显式加 grid 类，否则 grid-cols-* 无效——这是 90% 的“栅格不生效”问题的根源。
为什么 grid-cols-2 在手机上还是单列？
因为没写响应式前缀，grid-cols-2 默认等价于 sm:grid-cols-2。而 Tailwind 默认关闭 sm 断点（640px）以下的响应式类生成，除非你手动启用了它或改了配置。
- 想让手机竖屏（375px）就两列？用
grid-cols-2前先确认tailwind.config.js中是否保留了sm断点，或直接改用grid-cols-2（无前缀）+ 显式启用 JIT 模式 - 更稳妥的做法是写全：
grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4，避免中间断点缺失导致平板显示异常 - 如果删过默认断点（比如移除了
sm），那sm:grid-cols-2根本不会生成 CSS，DevTools 里也查不到对应规则
gap-4 没空隙？检查 display 是否真的为 grid
gap 类只对 display: grid 或 display: flex 容器生效，它不是 margin，也不改变文档流。常见错误是只写了 gap-4 却漏掉 grid。
- 必须同时存在：
class="grid grid-cols-2 gap-4"，顺序无关，但缺一不可 - 如果父容器被其他样式覆盖（比如某层 CSS 强制设了
display: flex），grid会被覆盖，gap-4就失效 - 想单独控制行列间距？用
gap-x-4和gap-y-2，比手写row-gap/column-gap更轻量
col-span-3 跨列错位或撑破布局
col-span-3 表示“跨越 3 个列轨道”，不是“占满 3 个子元素”。它的行为完全取决于父容器当前生效的 grid-cols-* 值。
- 若父容器是
grid-cols-2，再写col-span-3，该子项就会超出网格边界，可能引发横向滚动 - 响应式切换时尤其危险：比如
md:grid-cols-3下md:col-span-3是安全的，但若小屏未重置，col-span-3仍会作用在grid-cols-1上，直接溢出 - 正确做法是响应式绑定：
sm:col-span-2 md:col-span-3，确保跨列数始终 ≤ 当前列轨道数
真正难控的不是 class 怎么写，而是你是否预判了内容高度差异、图片加载失败、文本换行撑高、以及用户缩放视口后断点计算偏移——这些都会让看似“完美”的栅格突然错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
