columns属性不生效主因是display类型不支持，仅block、inline-block等有效；flex、grid、table、inline、contents均会使其失效；column-count与column-width共存时优先满足后者；跨栏断裂需用break-inside: avoid控制断点；注意浏览器兼容性及column-gap双前缀写法。
columns 属性不生效？先检查 display 类型
绝大多数情况下 columns 不起作用，是因为元素默认的 display 值不支持多列布局。只有 display: block、display: inline-block 等常规块级行为才有效；display: flex、display: grid、display: table 会直接忽略 columns。
- 确保目标容器没被意外设为
display: flex或display: grid - 如果用了
display: inline，需显式改成display: inline-block才能触发分栏 -
display: contents会让元素“消失”于盒模型，columns完全失效
column-count 和 column-width 冲突时谁说了算？
column-count 是“最多几栏”，column-width 是“每栏最小宽度”，二者同时设置时浏览器会优先满足 column-width，再尽可能塞进 column-count 指定的栏数——但不会强行切出比内容还窄的栏。
- 若容器宽 600px，设
column-width: 200px+column-count: 5，实际只出 3 栏（600 ÷ 200 = 3） - 若容器宽 600px，设
column-width: 350px+column-count: 2，实际只出 1 栏（350 × 2 > 600） - 想严格固定栏数？只设
column-count，删掉column-width
文字跨栏断裂、图片错位？用 column-break-inside 控制断点
默认情况下，浏览器会在任意位置断行分栏，导致段落被劈成两半、图片悬在栏外、表格截断等视觉混乱。关键不是禁用分栏，而是告诉浏览器“哪里不能断”。
- 对不想被切断的块级元素（如
<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a> <p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>、<figure></figure>），加break-inside: avoid（或旧写法column-break-inside: avoid） - 避免在
<h3></h3>后立刻断栏：给标题加break-after: avoid - 注意：
break-inside: avoid对inline元素无效，必须作用于块级容器
Chrome/Firefox 表现不一致？留意 column-gap 和兼容性陷阱
column-gap 在 Safari 14.1+ 才支持标准语法，旧版需用 -webkit-column-gap；Firefox 对 break-before/after/inside 的支持更严格，而 Chrome 有时会忽略某些断点规则。
立即学习“前端免费学习笔记（深入）”；
- 必须写双前缀：同时声明
column-gap: 1rem和-webkit-column-gap: 1rem -
column-rule（栏间线）不占空间，但会叠加在column-gap上，别误以为 gap 没生效 - 不要依赖
columns做响应式主布局——它本质是文本流增强，不是栅格系统；复杂结构建议用grid或flex
真正难搞的不是怎么写 columns，而是当内容含浮动、绝对定位、transform 或 overflow hidden 时，栏内流式行为会突然失效——这些情况得逐个测，没法靠一套规则兜底。
