column-width是列的最小宽度而非固定值，真实列宽由容器宽、column-count、column-gap和box-sizing共同决定；未设box-sizing: border-box会导致padding/border溢出列宽而破坏布局。
多列布局中列宽 ≠ 元素内容宽度，column-width 是最小宽度而非固定值，真实列宽由容器宽度、column-count、column-gap 和 box-sizing 共同决定；不统一设 box-sizing: border-box 会导致 padding/border 溢出列宽，直接破坏布局。
column-width 和 column-count 的行为差异
column-width 是“理想最小列宽”，浏览器会尽可能接近该值分配列数，但最终列宽可能更大（比如容器刚好容下 2 列，每列比设定值宽）；column-count 是硬性列数，列宽则被均分（减去所有 column-gap 后再除以列数）。
- 设
column-width: 150px，容器宽 400px → 实际生成 2 列，每列约 180px（含 gap） - 设
column-count: 3，容器宽 400px，column-gap: 20px→ 总 gap 占 40px（2 个 gap），可用宽度 360px，每列 120px -
columns: 2 150px表示“最多 2 列，且每列至少 150px”，实际列数取 min(2, 自适应结果)，列宽仍受 gap 影响
column-gap 如何影响列内元素的盒模型计算
column-gap 只控制列与列之间的空白，不改变单列内部的盒模型逻辑。但很多人误以为它“预留了空间给 margin”，其实不是：列内子元素的 margin 仍按常规折叠或叠加，column-gap 是列容器级的间隙，和子元素的 margin 无直接关系。
- 列内一个
<p></p>设margin: 1em，不会“被 gap 吸收”——它仍会撑开段落间距 - 若想让列内首尾元素贴边，需单独清除
margin-top/margin-bottom，column-gap不自动处理这个 -
column-gap值参与总宽度计算：容器宽度 = 所有列宽之和 +column-gap× (列数 − 1)
为什么必须全局设 box-sizing: border-box？
多列容器本身不重写子元素的 box-sizing，而默认 content-box 下，子元素的 width: 100% 仅指内容区宽度，加上 padding 或 border 就会溢出列宽，导致换行错乱或横向滚动条。
- 错误写法：
p { width: 100%; padding: 1rem; }→ 实际占用宽度 > 列宽 - 正确做法：
* { box-sizing: border-box; }，这样width: 100%包含 padding 和 border - 注意：Flex/Grid 容器子项常表现得像
border-box，但多列布局不提供这种隐式保障，必须显式声明
最易被忽略的是：列宽计算不检查子元素是否 overflow，只看容器尺寸和 CSS 规则；一旦子元素因 box-sizing: content-box 或未重置 margin 导致实际宽度超标，浏览器不会报错，只会默默换行或撑破布局——这种问题在响应式断点切换时才突然暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
