grid-cols-3没效果是因为父容器缺少display: grid声明；必须同时添加grid和grid-cols-3；响应式断点需确认配置是否修改；gap仅对grid/flex容器生效；自定义列需用引号包裹任意值语法。
grid-cols-3 为什么没效果？先看父容器有没有 grid
加了 grid-cols-3 却还是垂直堆叠，大概率是父容器没声明网格布局模式。Tailwind 不会自动补 display: grid，它只生成对应 CSS 属性值。
必须同时存在：grid（开启网格） + grid-cols-3（定义三列轨道）。
- 错误写法：
<div class="grid-cols-3">...→ 没grid，等于白写 - 正确写法：
<div class="grid grid-cols-3 gap-4">... - 用浏览器开发者工具检查 computed style，确认
display真的是grid，不是block或flex
响应式列数怎么配？sm:grid-cols-2 不等于手机上两列
Tailwind 的断点前缀默认从 sm（640px）起生效，但很多项目在 tailwind.config.js 里改过 theme.screens，导致 sm: 实际不触发。别假设“写了 sm 就一定在小屏生效”。
- 稳妥写法：从最小断点开始递进，比如
grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 - 如果关闭了
sm断点（常见于重定义 screens），那sm:grid-cols-2直接失效，得换成实际生效的前缀，如xs:grid-cols-2 -
grid-cols-2本身等价于sm:grid-cols-2（仅当未修改默认 screens 时），不是“所有尺寸都两列”
gap-4 失效？不是 margin 冲突就是父容器类型不对
gap 只对 display: grid 或 display: flex 容器生效。如果父元素只是普通 div，gap-4 就是纯摆设。
立即学习“前端免费学习笔记（深入）”；
- 常见误操作：给子项加
mb-4，以为能替代行间距 → 实际上它和gap是两套机制，mb会撑开外部流，破坏网格轨道计算 - 调试技巧：临时加
outline: 1px solid red到父容器，看清真实网格区域边界；再对比加gap-4前后的 outline 间距变化 - 需要行列不同间距？直接用
gap-x-6 gap-y-2，别拆成mr-6 mb-2—— 后者语义弱、难维护，且无法被place-items类统一控制
想每行 5 列或自定义轨道？grid-cols-[...] 要加引号，minmax(0, 1fr) 别省
Tailwind 默认只提供 grid-cols-1 到 grid-cols-12，真要 “每行 5 列” 或 “240px 1fr auto”，就得用任意值语法，而且配置稍有偏差就会失效。
- 合法写法：
grid-cols-[repeat(5,_minmax(0,_1fr))]（注意空格和下划线转义） - 非法写法：
grid-cols-[repeat(5, 1fr)]→ 缺minmax(0, 1fr)，内容长时会撑爆容器 - 带像素值的列（如
240px）需配合grid-flow-col或显式grid-row，否则自动流可能错行 - 自定义键名（如
sidebar-main）不支持响应式前缀：sm:grid-cols-sidebar-main无效，得单独为每个断点定义'sm:sidebar-main'
grid 类漏加”“断点前缀实际未启用”“gap 和 margin 混用”这三处。它们不会报错，只会让布局静默失效。 
