tailwind css 的 grid-cols-* 类是静态预设，无法实现 auto-fill 的动态列数计算；grid-cols-4 固定生成 4 列，而 auto-fill 需手写 css 或通过 theme.extend.gridtemplatecolumns 配置才能生效。
grid-cols-* 类名本身是静态预设的，Tailwind 不会在运行时根据容器宽度计算列数——它只生成你写死的那些类对应的 CSS 规则。
为什么 grid-cols-4 不等于 auto-fill
两者底层机制完全不同：grid-cols-4 编译为 grid-template-columns: repeat(4, minmax(0, 1fr))，固定 4 列；而 auto-fill 是 CSS 的运行时行为，需配合 repeat(auto-fill, minmax(200px, 1fr))) 才能动态算出最多放几列。Tailwind 默认不提供任何 auto-fill 或 auto-fit 工具类。
- 你写
sm:grid-cols-2 md:grid-cols-4，只是在两个断点硬编码列数，中间宽度变化时不会平滑过渡 - 若容器是
max-w-md的弹窗或侧边栏子区域，断点失效，列数无法自适应 -
grid-cols-[repeat(auto-fill,_minmax(200px,_1fr))]这种写法在 JIT 模式下仍不生效——Tailwind 不解析 CSS 函数，repeat()被当作文本忽略
哪些写法看似合理但实际无效
Tailwind 的类名扫描器只认完整字符串字面量，不执行 JS、不展开表达式、不识别 CSS 函数。
-
grid-cols-${n}（模板字符串）→ 构建时看不到真实值，CSS 文件里压根没这条规则 -
grid-cols-[repeat(5,_1fr)]→repeat()不被解析，整个类名被丢弃 -
grid-cols-[1fr_200px_auto]→ 必须启用 JIT + 正确配置content白名单，否则 dev 环境可能“碰巧”生效，build 后消失 -
sm:grid-cols-5却在中屏显示单列 → 很可能漏了md:断点，导致 768px 以下回退到未定义状态，浏览器按 block 渲染
真正能用的动态列方案只有两种
一种靠配置收口，一种靠手写 CSS，没有“纯 class 解决”的捷径。
- 在
tailwind.config.js的theme.extend.gridTemplateColumns里定义键值对，例如'5': 'repeat(5, minmax(0, 1fr))'，之后用grid-cols-5—— 安全、可搜索、不依赖 JIT 扫描 - 直接写内联样式：
style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr)))' }}—— 灵活，但失去 Tailwind 的响应式前缀和原子类语义 - 别把
gap和col-span当成万能胶：它们的行为强依赖父容器是否明确定义了列轨道；嵌套 Grid 时，gap 不穿透层级，col-span 也不跨容器生效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
