grid-cols-1 到 grid-cols-12 对应生成 repeat(n, minmax(0, 1fr))，实现等分弹性列而非固定百分比；超过12列需用自定义语法如 grid-cols-[...]，并注意断点、基础类和浏览器渲染验证。
grid-cols-1 到 grid-cols-12 是怎么映射列数的
它直接对应 CSS 的 grid-template-columns 值，比如 grid-cols-3 编译后就是 grid-template-columns: repeat(3, minmax(0, 1fr)) —— 注意不是固定宽度，而是等分的弹性列。Tailwind 默认用 minmax(0, 1fr)，确保内容收缩时列不会溢出容器。
常见误区是以为 grid-cols-6 会生成 6 个 16.66% 宽的列，实际它依赖 Grid 的 fr 单位行为，受 grid-gap（或 gap）和父容器尺寸共同影响。
-
grid-cols-1→ 单列流式布局，适合移动端断点下强制堆叠 -
grid-cols-2到grid-cols-12按整数递增，但超过 12 并不常用；真需要更多列，应改用grid-cols-[1fr_1fr_1fr_1fr_1fr]自定义 - 响应式写法如
md:grid-cols-3只在md断点及以上生效，注意断点阈值是否匹配你的设计系统
用 grid-cols-* 配合 grid-rows-* 控制行列结构
仅设 grid-cols-* 不会自动创建多行；Grid 行高由内容撑开或显式用 grid-rows-* 控制。例如：
```html <div class="grid grid-cols-3 grid-rows-2 gap-4"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> ```
上面代码强制渲染为 3×2 网格（6 个子项刚好填满），但如果只有 5 个子项，第 6 格留空；若子项超 6 个，则溢出到新行——因为 grid-rows-2 只限制显式行数，隐式行仍可扩展。
- 想让多余子项自动换行，去掉
grid-rows-*，只留grid-cols-*和gap -
grid-rows-[200px_1fr]这类自定义值需启用content或theme.extend.gridRow才能生效 - 避免同时设置
grid-rows-*和grid-auto-rows，后者会覆盖前者的隐式行行为
响应式断点 + grid-cols-* 组合时的常见错位
典型现象：在 sm 下正常三列，切到 md 却变成两列还错位。问题往往出在断点类未覆盖全部状态，或父容器未设 grid 基础类。
- 必须显式写
grid或grid-flow-row等基础类，否则grid-cols-*不生效 - 断点类顺序要合理，比如
grid-cols-1 md:grid-cols-2 lg:grid-cols-3，漏掉中间断点可能导致意外回退 - Flexbox 容器里嵌套 Grid 容器没问题，但别把
grid-cols-*错加在 Flex 子项上——它只对直系 Grid 容器有效 - 用浏览器 DevTools 检查元素 computed 样式，确认
display: grid和grid-template-columns是否真实存在
自定义列宽比：不用 grid-cols-* 而用 grid-cols-[...] 的时机
当需要非等分比例（比如 2:1:1 或 3/4 + 1/4）时，grid-cols-* 工具类不够用，得手写 grid-cols-[...]。
例如：grid-cols-[2fr_1fr_1fr] 实现左侧占两份、右侧均分一份；grid-cols-[300px_auto_1fr] 固定第一列宽、第二列内容自适应、第三列弹性填充剩余空间。
- 方括号语法需开启 Tailwind 的
jit模式（v3.0+ 默认开启），否则无法识别 - 空格不能省略：
grid-cols-[2fr_1fr]合法，grid-cols-[2fr_1fr]（下划线连写）也合法，但grid-cols-[2fr1fr]会失效 - 百分比单位慎用：
grid-cols-[75%_25%]在响应式场景下易与容器 width 冲突，优先用fr或minmax()
复杂网格结构（比如带 sidebar 的仪表盘）往往需要混合使用预设类和自定义列声明，这时候别硬套 grid-cols-4，该写就写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
