grid-cols-1 到 grid-cols-12 生成固定轨道数（如 repeat(5, minmax(0, 1fr))），不随容器宽度自适应；真正自适应需用 grid-cols-[repeat(auto-fit,_minmax(240px,_1fr))]，配合 grid 类、无干扰子项及 JIT 模式支持。
Tailwind 默认的 grid-cols-1 到 grid-cols-12 无法实现真正自适应的列数（比如“每行最多放 5 个卡片，但最小宽度不小于 240px”），必须配合 grid-cols-[repeat(auto-fit,_minmax(240px,_1fr))] 这类任意值语法，且需确保父容器有 grid 类、子项无强制宽高干扰自动流。
为什么 grid-cols-5 不等于“每行 5 个”
常见错误现象：md:grid-cols-5 在中屏下只显示 3 列，甚至单列堆叠。这不是类没加载，而是它生成的是 repeat(5, minmax(0, 1fr)) —— 固定 5 轨道，不管内容多少、容器多宽。
- 想让列数随容器宽度自动增减，得用
auto-fit或auto-fill，例如：grid-cols-[repeat(auto-fit,_minmax(240px,_1fr))] -
auto-fit会收缩空轨道，auto-fill保留所有轨道（即使空），视觉上更“饱满”，但可能留白 - 必须显式写
grid类，否则grid-cols-[]只是设置未生效的 CSS 属性 - 子元素若设了
w-full或flex，可能撑满整行，破坏自动换行逻辑
如何安全使用方括号任意值语法
像 grid-cols-[repeat(auto-fit,_minmax(240px,_1fr))] 这种写法，不是所有构建工具默认支持，容易报错或被忽略。
- 确保启用 JIT 模式（Tailwind v3.0+ 默认开启），否则方括号语法不会生成对应 CSS
- 括号内空格必须用下划线
_替代，如minmax(240px,_1fr)，不能写成minmax(240px, 1fr) - 整个值必须用英文双引号包裹在
tailwind.config.js的safelist中（若用动态 class），否则生产环境可能丢失 - 不要嵌套函数，比如
minmax(auto, 1fr)在部分浏览器行为不一致，优先用minmax(240px, 1fr)
响应式切换时子项错位的根本原因
写了 sm:grid-cols-[repeat(auto-fit,_minmax(200px,_1fr))] 和 lg:grid-cols-[repeat(auto-fit,_minmax(280px,_1fr))]，但某些卡片“悬在半空”或换行异常。
立即学习“前端免费学习笔记（深入）”；
- 问题不在列定义，而在子项的
col-span或grid-row冲突：自动流模式下，显式跨列会打断auto-fit的重排逻辑 - 避免对自动流网格的子项使用
col-span-2等固定跨列，除非你同时控制grid-auto-flow行为 - 若需某子项始终占满整行，用
col-span-full（它适配当前轨道总数，比写死col-span-12更安全） - 长文本或图片未设
min-w-0或truncate，会撑爆minmax()下限，导致列数骤减
最易被忽略的是：自动流网格的“自适应”依赖子项真实内容尺寸，而不是类名本身；哪怕写了正确的 grid-cols-[...]，只要一个子项带 white-space: nowrap 或未限制最大宽，整个网格就可能退化为单列。
