必须显式添加grid类，否则grid-cols-*无效；Tailwind仅生成grid-template-columns值，不设置display: grid，父容器若为block或flex则仍按流式布局渲染。
grid类没加，grid-cols只是个无效声明
写了grid-cols-3但子元素还是垂直堆叠？不是类没加载，而是父容器根本没启用 Grid 布局。Tailwind 的 grid-cols-* 类只生成 grid-template-columns 值，不改变 display 属性。浏览器看到的仍是 display: block 或 display: flex，自然按流式布局渲染。
必须显式写 grid（对应 display: grid），组合使用才生效：grid grid-cols-3 gap-4。单独写 grid-cols-3 或塞在 flex 容器里，computed 样式里 display 依然不是 grid。
调试时直接加 outline: 1px solid red 看是否框出网格区域；再对比加 gap-4 前后内部间距变化，能快速确认网格上下文是否建立。
响应式断点漏了中间状态，小屏/中屏“掉链子”
只写 md:grid-cols-3，那 640px–767px（sm 区间）就没有任何列声明，浏览器按默认 block 渲染，结果就是单列堆叠——不是“跳过”，而是彻底未定义。
安全写法是从最小断点开始连续覆盖：grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4。漏掉 sm:，sm 下行为不可控。
检查 tailwind.config.js 中 theme.screens 是否被自定义过——比如把 sm 改成 500px，那 sm:grid-cols-2 就只在 ≥500px 生效；若真要跳断点（如只在 md+ 用三列），得明确补上 sm:grid-cols-1。
子项有固定宽或 min-width，撑爆网格轨道
图片、按钮、输入框等元素自带 min-width: auto，即使设了 grid-cols-3，它们也不愿收缩，导致整行溢出、强制换行到下一行（其实是隐式新行，不是你想要的“每行三列”）。
解决方法：
- 对图片加
max-w-full+h-auto - 对卡片类区块加
min-w-0（解除默认最小宽限制） - 用
grid-cols-[repeat(auto-fit,_minmax(250px,_1fr))]替代grid-cols-3，让 Grid 自动根据内容宽度分配列数
auto-fit 和 auto-fill 行为不同：前者会压缩空列，后者保留所有轨道——换行逻辑差异可能让你少一整行，别靠猜。
嵌套 Grid 容器里 gap 和 col-span 失效
gap-4 只作用于当前 Grid 容器的**直接子项**；若子项内部也是 Grid，它的 gap 与父级无关——别指望靠一层 gap 控制全树。
col-span-3 表示“跨越当前容器定义的 3 条列线”，如果该容器没设 grid-cols-*，或者嵌套层级里某一级漏了 grid，那 col-span 就只是个无效声明，浏览器按隐式网格计算，结果不可控。
每一层网格容器都必须独立声明 grid 和对应的 grid-cols-*，不能依赖父级透传。
最常被忽略的一点：Grid 的列轨道定义和子项是否换行是两回事。列数设对了，不代表子项就一定填满一行——它取决于内容尺寸、minmax() 配置、以及有没有被其他 CSS（比如 flex 父容器）意外劫持布局上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
