应根据内容密度和断点需求选择列数：小屏用 grid-cols-2，中大屏用 md:grid-cols-4；自定义值需加引号和方括号；gap 类需父容器为 grid 或 flex；col-span 值不可超过当前列轨道数。
grid-cols-2 和 grid-cols-4 到底怎么选
列数不是拍脑袋定的，得看内容密度和断点需求。比如卡片列表在桌面端铺 4 列很舒服，但手机上撑满 4 列就挤成小点，用户点不准。grid-cols-2 在小屏更稳妥，grid-cols-4 更适合中大屏。
Tailwind 默认只在 md: 及以上才启用响应式前缀，所以 grid-cols-2 md:grid-cols-4 才是常见写法——小屏 2 列，中屏起 4 列。漏掉 md: 前缀，所有尺寸都会强制 4 列，手机上直接溢出。
- 别直接用
grid-cols-6或更高，除非你真测过最小宽度下每列能容纳文字/图片 -
grid-cols-[1fr_2fr_1fr]这种自定义值要加引号，否则构建工具会报错（如 Vite 报Invalid CSS） - 列数不等于“显示几个子元素”，它只是划分轨道；子元素是否占满、是否跨行，还得看
col-span-和row-span-
gap-4 不生效？检查父容器有没有 display: grid
Tailwind 的 gap 类只对 display: grid 或 display: flex 生效。如果父元素只是普通 div，没加 grid 或 flex，那 gap-4 就是摆设。
常见错误是：写了 gap-4，但忘了给容器加 grid —— Tailwind 不会自动补 display: grid，它只作用于已有网格/弹性布局的容器。
立即学习“前端免费学习笔记（深入）”；
- 必须同时存在
grid和gap-4，顺序无关 -
gap-4等价于gap: 1rem，不是margin，不会影响外部流式布局 - 想单独控制行列间距？用
gap-x-4和gap-y-2，比写 CSS 更轻量
grid-template-rows 和 minmax() 配合时的陷阱
想让网格行高随内容伸缩，又保底 80px？grid-template-rows: minmax(80px, auto) 看似合理，但在 Tailwind 里不能直接写——它不支持原生 CSS 函数嵌套。
正确做法是用 grid-rows-[minmax(80px,_auto)]，注意括号和空格必须用下划线替代，且整个值要用方括号包裹。否则构建时报错或被忽略。
- 方括号语法是 Tailwind 的“任意值”机制，仅限于
grid-rows-、grid-cols-等少数类名 -
minmax(80px, 1fr)是合法的，但minmax(auto, 1fr)在某些浏览器里行为不一致，慎用 - 如果只是固定行高，优先用
grid-rows-3或h-20类组合，更稳定
子元素跨列用 col-span-3，但实际只跨了 2 栏
col-span-3 表示“跨越 3 个列轨道”，不是“占满 3 个子元素宽度”。如果父容器只有 2 列（grid-cols-2），那 col-span-3 就会超出边界，导致布局错位或横向滚动。
这个错误特别容易在响应式切换时出现：比如 md:grid-cols-3 下 col-span-3 正常，但切到手机端 grid-cols-2 后，它就强行跨 3 轨道，超出了可用空间。
- 跨列数不能超过当前列数总数，否则行为不可控
- 响应式跨列要用前缀，比如
col-span-2 sm:col-span-3 md:col-span-1 - 不确定列数时，改用
col-span-full更安全，它总是跨满当前所有列
网格的“轨道”和“内容”是两层逻辑，很多人卡在以为 col-span- 是按子元素数量算的。其实它只认轨道数，而轨道数由 grid-cols- 决定——这两者不匹配，就是最常翻车的地方。
