<p>根本原因是未添加 grid 类，仅用 grid-cols-* 不会自动设置 display: grid，容器仍为 block 布局，子项垂直堆叠；必须显式添加 grid 才能使所有网格相关类生效。</p>
grid-cols-* 为什么在手机上还是三列？
根本原因是没写基础 grid 类，只加 grid-cols-3 不会自动让容器变成网格——Tailwind 不补 display 属性。浏览器看到的仍是 block 布局，子项自然垂直堆叠。
必须显式加 grid（对应 display: grid），否则所有 grid-cols-、gap-、col-span- 都无效。
- 错例：
grid-cols-1 sm:grid-cols-2 md:grid-cols-3→ 小屏下没有grid，grid-cols-1不起作用 - 正例：
grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 - 用 DevTools 的 Layout 面板确认 computed 中是否真有
display: grid和grid-template-columns
响应式断点漏掉中间档，会导致列数“跳变”或回退到单列
Tailwind 断点是独立开关，不是继承链。漏掉 sm 或 md，就等于那段视口宽度下没定义列数，浏览器按默认渲染（通常是 block）。
比如只写 grid-cols-1 md:grid-cols-3，那么 640px–767px 这段区间没有任何列声明，结果就是单列且无 gap，和设计预期脱节。
立即学习“前端免费学习笔记（深入）”；
- 安全写法：从最小断点开始连续覆盖，如
grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 - 检查
tailwind.config.js中theme.screens是否被自定义过，比如把sm改成 500px，那sm:grid-cols-2就只在 ≥500px 生效 - 真要跳断点（如只在 md+ 用三列），得明确补上
sm:grid-cols-1，否则 sm 下行为不可控
想每行 5 列或混合轨道（如 240px + 1fr + auto），必须自定义 gridTemplateColumns
grid-cols-5 是预设等分列，但业务中常需像素固定 + 弹性 + 自适应组合。Tailwind 默认不生成这类轨道，得手动扩展配置。
在 tailwind.config.js 的 theme.extend.gridTemplateColumns 里加键值对：
module.exports = {
theme: {
extend: {
gridTemplateColumns: {
'5': 'repeat(5, minmax(0, 1fr))',
'sidebar-main': '240px 1fr',
'fluid-auto': 'minmax(200px, 1fr) minmax(300px, 2fr) auto'
}
}
}
}- 自定义键名不支持响应式前缀（
sm:5无效），要分别定义'sm:5'、'md:5' - 含像素值的列（如
240px）建议配合grid-flow-row或显式grid-row，避免自动流错行 - 务必用
minmax(0, 1fr)而非纯1fr，防止长文本撑爆容器导致横向滚动
gap 失效或子项错位，八成是嵌套或 margin 干扰
gap 只作用于当前 Grid 容器的直接子项，不穿透嵌套层级。父 Grid 里的子项如果自己也是 Grid，它的 gap 和父级无关。
更常见的是子项自带 mb-4、mr-2 等 margin，视觉上看起来像 gap 没生效，其实是 margin 和 gap 叠加造成间距异常。
- 调试时临时加
outline: 1px solid red看真实网格区域边界，比靠眼睛判断准 - 别混用：
gap-4+mb-4会让垂直间距翻倍 - 旧版 Safari 对
gap支持不全，真要兼容 iOS 15.4 之前，得拆成row-gap和column-gap
实际项目里最容易被忽略的，是自定义列轨道后没同步处理子项的 col-span- 行为，以及嵌套 Grid 容器之间 gap 的作用域隔离——它们不会叠加，也不会继承，得一层一层单独配。
