父容器未设 display: grid 导致 grid-cols-3 无效；响应式需配断点如 md:grid-cols-2；grid-cols-[200px] 非四列而是单列固定宽；gap 受子项 margin 干扰，调试宜用 outline 查看真实网格区域。
grid-cols-3 渲染出来却是单列？检查父容器是否设了 display: grid
直接写 grid-cols-3 没反应，大概率是忘了给父元素加 display: grid —— Tailwind 不会自动帮你补这个。它只负责生成 CSS 类，不接管布局逻辑。
常见错误现象：grid-cols-3 加了，但子元素还是垂直堆叠、宽度撑满一行。
- 必须确保父容器有
grid或inline-grid声明（比如加grid工具类） - 如果父容器是 Flex 或 Block，默认不会触发 Grid 子项排列
- 用浏览器开发者工具看 computed style，确认
display真的是grid
grid-cols-2 在小屏错乱？响应式断点没配对
Tailwind 的 grid-cols- 类本身不带响应式，得手动组合断点前缀，否则在手机上照样强行两列，内容被挤压或溢出。
使用场景：卡片列表、表单字段分栏、文章摘要网格
-
grid-cols-1 md:grid-cols-2 lg:grid-cols-3才是合理写法 - 别只写
grid-cols-2—— 它等价于sm:grid-cols-2，而很多项目关闭了sm断点默认启用 - 检查
tailwind.config.js里theme.screens是否自定义过，会影响前缀生效范围
grid-cols-4 和 grid-cols-[200px] 行为完全不同
grid-cols-4 是等宽 4 列的隐式轨道（repeat(4, minmax(0, 1fr))），而 grid-cols-[200px] 是显式声明一列固定宽，其余内容全挤进第一列 —— 这不是你想要的“四列”。
参数差异：
-
grid-cols-2→grid-template-columns: repeat(2, minmax(0, 1fr))) -
grid-cols-[200px_1fr_200px]→ 手动指定三列，支持混合单位 -
grid-cols-[repeat(4,200px)]才等价于“四个 200px 宽列”，但注意要加引号避免 CSS 解析失败
性能影响：纯数字类（如 grid-cols-6）编译后体积小；带方括号的任意值需开启 content 扫描，且可能触发 JIT 模式下额外计算。
gap-4 没生效？确认没被 margin 或 padding 覆盖
网格间隙（gap）是作用在 grid container 上的，但它会被子元素自身的 margin 干扰 —— 尤其当子项写了 mb-4 之类，视觉上看起来像 gap 失效。
容易踩的坑：
-
gap只控制 grid track 之间的空隙，不替代子元素内部边距 - 如果子项用了
flex或block布局，它们的margin仍会叠加在gap上 - 调试时临时加
outline: 1px solid red看真实 grid 区域边界，比靠眼睛猜更准
复杂点在于：gap 是 shorthand，拆成 row-gap 和 column-gap 时，某些旧版 Safari 对 gap 支持不全，真要兼容 iOS 15.4 之前，得单独写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
