<p>必须显式添加 grid 类，否则 grid-cols-* 不生效；父容器 display 非 grid 时列定义无效；响应式需连续覆盖断点；自定义列应配置 theme.extend.gridTemplateColumns 并用 minmax(0, 1fr) 防撑破。</p>
必须显式加 grid 类，否则所有 grid-cols-* 都不生效——这是最常卡住人的第一步。
为什么写了 grid-cols-3 却还是单列堆叠
因为 grid-cols-3 只生成 grid-template-columns: repeat(3, minmax(0, 1fr))，它不管 display 是什么。父容器若仍是 block 或 flex，这条规则就等于没写。
- ✅ 正确写法：
class="grid grid-cols-3 gap-4" - ❌ 错误写法：
class="grid-cols-3"（缺grid）或class="flex grid-cols-3"（flex和grid冲突） - 用浏览器 DevTools 的 Computed 面板确认：
display必须是grid，且grid-template-columns存在对应值 - 加
outline: 1px solid red快速验证网格区域是否真正建立
响应式断点漏一个，列数就“掉链子”
Tailwind 断点是独立开关，不是继承链。只写 md:grid-cols-3，那 640px–767px（sm 区间）就完全没声明，浏览器按默认 block 渲染，结果就是单列堆叠。
- 安全写法是从最小断点开始连续覆盖：
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 列或混合轨道，别硬凑 grid-cols-[...]
grid-cols-5 默认不生成；grid-cols-[240px_1fr_auto] 依赖 JIT 扫描，build 后容易失效。最稳方式是往 tailwind.config.js 的 theme.extend.gridTemplateColumns 里加键值对：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
theme: {
extend: {
gridTemplateColumns: {
'5': 'repeat(5, minmax(0, 1fr))',
'sidebar-main': '240px minmax(0, 1fr)',
'fluid-auto': 'minmax(200px, 1fr) minmax(300px, 2fr) auto'
}
}
}
}
- 之后就能直接用
grid-cols-5或grid-cols-sidebar-main，不依赖 JIT，build 后也稳定 - 务必用
minmax(0, 1fr)，不是单纯1fr——防长文本或图片撑爆容器导致横向滚动 - 含像素值的列（如
240px）需配合grid-flow-row或显式grid-row，否则自动流下跨格子项易错行
gap 和 col-span 只作用于直系 Grid 容器
gap-4 只影响当前 Grid 容器的直接子项；若子项内部也是 Grid，它的 gap 与父级无关。同理，col-span-3 表示“跨越 3 个列轨道”，不是“占满 3 个子元素宽度”——它的行为强依赖父容器当前定义的列轨道数。
- 若父容器是
grid-cols-2，再写col-span-3，该子项就会超出网格边界，可能引发横向滚动或错位 - 别指望靠一层
gap控制全树；嵌套 Grid 要各自加gap -
gap是唯一能真正“隔离”网格项之间间距的方式；用margin或padding替代会干扰轨道计算，尤其在auto-fit场景下
自定义列轨道时，minmax(0, 1fr) 这个细节最容易被忽略，但它恰恰是防止内容撑破布局的关键防线。
