column-count将内容按文本流自动切分为指定栏数，不保证等高，可能劈裂标题或图片；需配合break-inside: avoid（对块级元素生效）防止断裂，且column-count优先级高于column-width。
column-count 会把内容自动切分成等宽列，但不保证每列高度一致
直接给容器加 column-count 就能分栏，比如 column-count: 3 会让文本流切成三列，浏览器按内容长度自动分配断点。它不是网格或 Flex 那种“每个子元素占一格”的布局，而是把整个块级内容当作文本流来切——所以 h2、p、甚至 img 都可能被劈开（比如标题卡在第一列末尾，下半截跳到第二列开头）。
常见误用是把它当 display: grid 用，结果发现子元素错位、图片被截断、或者鼠标选中文本时跨列混乱。这不是 bug，是设计如此。
避免 column-count 切断标题或图片的实用方法
用 break-inside: avoid 可以阻止元素被列断点切开，但它只对块级元素生效，且需要配合 display: block（有些元素默认不是 block）。
-
h1,h2,p这类天然块级元素，直接加break-inside: avoid即可 -
img默认是 inline，得先写display: block，再加break-inside: avoid - 如果父容器用了
column-count，子元素设break-inside: avoid后仍被切断，大概率是因为它被嵌套在了inline容器里（比如没闭合的span），要检查 HTML 结构
column-count 在不同浏览器里的兼容性表现
column-count 在 Chrome、Firefox、Safari（包括 iOS）、Edge 16+ 都支持良好，但 Safari 15.4 之前有个经典问题：当容器有 overflow: hidden 时，最后一列可能被裁掉一部分内容，且不触发滚动。解决办法是去掉 overflow: hidden，或改用 overflow: clip（现代 Safari 支持）。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
IE10/11 虽然支持 column-count，但不支持 break-inside，所以无法防止切分——如果必须兼容 IE，就得放弃自动分栏，改用 JS 模拟或服务端预分栏。
column-count 和 column-width 的优先级关系
两者可以同时设置，但浏览器只听一个：column-width 是“建议最小宽度”，column-count 是“强制列数”。只要两者共存，column-count 优先级更高——即使内容不够三列宽，也会强行撑出三列（留白）；而 column-width: 200px 配 column-count: 3，最终列宽可能是 220px 或 180px，取决于容器总宽能否整除。
真正想响应式分栏，应该只设 column-width，让浏览器自己算列数；只有明确要固定列数（比如杂志排版要求必须三栏），才用 column-count 并接受它带来的刚性约束。
别忘了加 column-gap 控制间距，默认是 1em，太大会让窄屏下实际可用宽度骤减，小屏慎用大值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
