优先用columns实现文字分栏，用grid实现精确控制的网格布局；columns轻量但仅适用于流式内容且不支持跨列，grid自由度高但需显式定义轨道。
多列布局该用 grid 还是 columns？
看需求：要精确控制每列宽度、间距、对齐或跨列，选 grid；只是让文字或卡片像报纸一样自动分栏、不关心单列样式，用 columns 更轻量。
columns 是 CSS 原生 column-count / column-gap 的封装，只作用于块内流式内容（比如 <p></p> 或带 display: block 的容器），对 Flex/Grid 子项无效；grid 则完全接管布局逻辑，自由度高但需显式定义列轨道。
- 文字分栏、博客正文、新闻摘要 → 优先
columns-3 md:columns-4 - 商品卡片网格、仪表盘卡片组、响应式表单布局 → 用
grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 - 需要某一项横跨两列（比如 banner）→ 只能用
grid+col-span-2，columns不支持跨列
columns 类在实际中为什么经常“没反应”？
最常见原因是容器没设高度或最小高度，导致内容直接垂直铺满，没触发分栏；或者子元素用了 display: inline-block 或 float，破坏了多列流式上下文。
- 确保父容器有明确宽度（比如
w-full）且不设height（除非你真想截断） - 子元素避免用
inline-block、float、flex，否则它们会脱离列流，变成整块“胶水”塞进第一列 - 若内容是卡片列表，别给外层加
columns-3，而应把卡片放进一个div再设columns-3，且卡片本身用break-inside-avoid防止被劈开 - 注意 Safari 对
columns的兼容性：iOS 15.4+ 和 macOS Monterey+ 没问题，但老版本可能漏掉column-rule或错乱换行
grid-cols- 系列类怎么避免响应式错位？
Tailwind 的 grid-cols- 是基于 grid-template-columns 生成的，本质是固定列数。当内容宽度变化时，列宽会等比缩放，但不会自动增减列数——这点和 columns 的“尽力分多少栏”完全不同。
- 别混用
grid-cols-2和columns-2在同一容器上，CSS 层叠会导致不可预测行为 - 响应式断点要覆盖典型设备宽度：比如
grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4，而不是跳过sm直接从md开始 - 如果列内容高度差异大，加
grid-auto-rows-min或grid-rows-[1fr]控制行高一致性，否则会出现“阶梯状”错位 - 使用
gap而非padding控制列间距，gap是 grid 原生属性，不会影响子项盒模型
用 grid 实现“等宽但自适应列数”的真正解法
很多人想用 grid 达到类似 columns 的“根据容器宽度自动决定列数”，但 Tailwind 默认不提供 grid-cols-fit 这种类名。得靠 grid-cols-[repeat(auto-fit,_minmax(240px,_1fr)))] 这类自定义值实现。
- 必须写在
className里，不能用预设类，因为auto-fit/auto-fill不在默认配置中 -
minmax(240px, 1fr)中的240px是单列最小宽度，太小会导致小屏下挤出横向滚动条 -
auto-fit会合并空列，auto-fill会保留空轨道，多数场景选auto-fit - 这个写法在 JIT 模式下生效，但会略微增加构建体积；如用旧版 Tailwind，需手动加到
theme.extend.gridTemplateColumns
复杂点在于：这种写法无法和 gap 完全解耦——比如你想在小屏用 gap-2、大屏用 gap-6，就得配 gap-x- / gap-y- 单独控制，否则 gap 会覆盖所有断点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
