column-width 是自适应列布局的核心，浏览器自动计算最优列数与列宽；需搭配 column-gap、break-inside: avoid 和 page-break-inside: avoid，并确保父容器有明确宽度、卡片为块级且无固定高度或脱离文档流操作。
直接用 column-width，别碰 column-count，也别写 calc() 或 CSS 变量去“算列宽”——浏览器自己会算，而且算得比你稳。
为什么 column-width 是自适应的核心
column-width 不是固定列宽，而是“最小期望宽度”。浏览器拿到这个值后，会尝试不同列数（比如 1 列、2 列、3 列……），选出能在容器内放下、且列宽 ≥ 你设的值的最大列数。整个过程自动响应容器尺寸变化，无需 JS 或媒体查询干预。
- 设
column-width: 300px，容器宽 800px → 实际列宽约 385px，列数为 2 - 容器缩到 500px → 列宽约 485px，列数退为 1
- 必须搭配
column-gap（哪怕只是1px），否则窄屏下极易坍缩成单列 -
column-fill: auto是隐式默认值，但 Safari 14.1 前有 bug，建议显式写上并加前缀：-webkit-column-fill: auto
break-inside: avoid 必须加，且要配 page-break-inside: avoid
卡片被截断在两列之间，是瀑布流最常见翻车点。仅靠 break-inside: avoid 在 Firefox 下无效，必须补上 page-break-inside: avoid。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 卡片元素必须是块级（
<div> 默认满足），不能是 <code>inline-block、float或绝对定位，否则脱离文档流，列切分失效 - 不要给卡片设固定高度（如
height: 200px），否则会撑乱列高均衡 - 如果卡片内含图片，确保
img设了display: block，避免底部空白干扰行高计算 - 别同时写
column-count和column-width：两者冲突，column-width优先级更高，但浏览器行为不可预测，resize 过程中容易闪动或错列 - 不要用
columns: 300px auto缩写——它等价于column-width: 300px; column-count: auto，而column-count: auto是非法值，部分浏览器会静默忽略整条声明 - 想响应式调整倾向？用媒体查询切
column-width值，而不是变量：@media (max-width: 768px) { .container { column-width: 220px; } }
父容器必须有明确宽度限制，禁用 column-count 和 columns 缩写
父容器没有 width、max-width，或没嵌套在 flex/grid 子项中，column-width 就无参照，会退化为单列。
真正难的不是写对那几行 CSS，而是守住边界
一旦给卡片加 transform、塞绝对定位子元素、或手动干预 DOM 顺序，columns 就从“省事方案”变成“排查黑洞”。这些操作不会报错，但会让列分配逻辑彻底失效，且问题只在特定缩放、字体渲染或 resize 瞬间暴露，极难复现和定位。
