columns属性需作用于块级容器，简写等价于column-count和column-width，优先满足宽度；用break-inside: avoid防止单元断裂，column-gap和column-rule调节列间距与分隔线，column-span: all实现跨列标题或图片。
直接用 columns 就能实现报纸式多列排版，但浏览器默认会把内容机械切分，不考虑语义断行、标题孤立、图片跨列等实际问题——这些得靠配套属性手动干预。
columns 属性怎么写才生效
columns 是简写，等价于同时设 column-count 和 column-width。浏览器会优先满足 column-width（目标列宽），再尽可能凑够 column-count（列数），二者冲突时以宽度为准。
常见写法：
article {
columns: 3; /* 只设列数，宽度由容器自动算 */
columns: 200px; /* 只设宽度，列数由容器宽度除以200px决定 */
columns: 4 180px; /* 先尝试4列，每列约180px；若容器太窄，自动减少列数 */
}注意：columns 必须作用在**块级容器**上（如 div、article），对 inline 元素无效；且容器需有明确高度或足够内容，否则看不出分列效果。
立即学习“前端免费学习笔记（深入）”；
内容被硬切开？用 break-inside 防止单元格断裂
默认情况下，p、h2、li 这类块级元素可能被劈成两半，出现在不同列里。用 break-inside 可禁止内部断行：
-
break-inside: avoid：最常用，阻止元素被拆到不同列（如不让一个h3头部单独占一列下半部分） -
break-inside: avoid-column：更严格，连 column 内的分页/分栏都避免（兼容性稍差）
推荐加在语义单元上：
article h2,
article p,
article figure {
break-inside: avoid;
}首行缩进、列间距、列线怎么调
多列不是单纯“复制粘贴”，需要视觉连贯性：
-
column-gap：列间空白，默认1em，可设为2rem或16px -
column-rule：列之间加线，如column-rule: 1px solid #eee（注意：它不占布局空间，是画在gap上的） -
text-indent仍有效：首行缩进照常写，各列第一段都会缩进
特别注意：column-gap 和 column-rule 在 Flex/Grid 容器里无效，只对多列布局起作用。
图片和表格跨列显示不了？用 column-span
column-span 是唯一能让元素横跨所有列的属性，目前仅支持 none 和 all 两个值（Firefox 还不支持 all）：
article h1 {
column-span: all; /* 标题独占一行，横跨全部列 */
text-align: center;
}
article figure {
column-span: all; / 图片铺满整行，不被切进某一列 /
margin: 1rem auto;
}
限制很明确：只能用于**直属于多列容器的子元素**，嵌套一层就失效；且必须是块级元素（display: block 或类似）。
真正难的不是写对 columns，而是处理标题孤悬、图片错位、列表项断裂这些细节——它们不会报错，但会让排版看起来像没调完的草稿。
