columns-2没效果是因为容器内容为块级元素且未设break-inside: avoid，分栏仅对流式文本生效，非grid/flex布局；需确保内容可断行、容器有足够高度或长度。
columns-2 为什么没效果？检查内容是否可分栏
直接加 columns-2 却看不到分栏，大概率是因为容器内内容是块级元素（比如 <p></p>、<div>）且未设置 <code>break-inside: avoid —— 浏览器默认会把整块内容塞进第一栏，不拆分。分栏（CSS Multi-column Layout）本质是对**流式文本内容**做自动断行分栏，不是 Grid/Flex 那种布局容器。
实操建议：
- 确保内容是连续文本流，或用
<span></span>/ 内联元素包裹文字；若必须用<p></p>，给它加break-inside: avoid（Tailwind 中对应break-inside-avoid）防止被跨栏截断 - 容器需有明确高度或足够内容长度，否则单栏就撑满，看不出“分”
- 避免对
flex或grid容器直接应用columns-*—— 这些 display 值会覆盖 column 行为
columns-2 和 grid-cols-2 的根本区别在哪
columns-2 是 CSS column-count 的封装，作用于**内容流内部断行**，生成的是视觉上并列的文本栏，但 DOM 顺序仍是线性的，不能控制某段文字固定在哪一栏；而 grid-cols-2 是 CSS Grid 的列轨道定义，创建的是**独立的布局容器区域**，每个子元素可显式放置到特定列。
使用场景差异：
- 用
columns-2：长文章、新闻摘要、词典条目等需要阅读连贯性、允许浏览器自动分段的场景 - 用
grid-cols-2：卡片列表、表单左右布局、需要精确控制子项位置或响应式错位的场景 - 性能上，
columns-*在内容极长时可能触发重排开销，grid更可控但需更多 HTML 结构
如何控制栏间距和栏线
Tailwind 提供了配套类来微调分栏样式，但注意它们必须和 columns-* 同时作用于同一元素才生效。
常用组合：
- 栏间距：
column-gap-4（对应column-gap: 1rem），值过大可能导致栏间空白突兀，建议 ≤gap-x-4的常规值 - 栏线：
column-rule-2+column-rule-sky-300+column-rule-solid，三者缺一不可；单独用column-rule类无效 - 栏宽不建议硬设（如
column-width-64），它会和columns-2冲突——浏览器优先满足column-count，column-width仅作最小宽度提示
响应式分栏与常见兼容性陷阱
可以写 md:columns-3 实现断点后三栏，但要注意 Safari 旧版本（≤ iOS 14.5）对 columns 的 break-after/break-before 支持不全，导致标题被错误断开。
规避方式：
- 关键标题前加
break-before-column（Tailwind v3.3+），旧版需手动加style="break-before: column" - 避免在分栏容器内嵌套
position: absolute元素——它的定位参考是最近的定位祖先，不是当前栏 - 打印样式中
columns行为不稳定，导出 PDF 前建议用@media print { columns: 1 }降级
最易被忽略的一点：分栏不支持子元素设置 width: 100% 来占满单栏——它会试图占满整个容器宽度，破坏分栏结构。真要撑满单栏，得用 width: -webkit-fill-available 或改用 grid。
