现代项目应弃用columns属性，改用CSS Grid实现多列布局；Grid通过grid-template-columns、grid-auto-flow等可控性强，兼容性好且语义完整。
columns 属性在现代项目里基本别用了
它确实能实现多列排版，但行为不可控、断行不智能、不支持 Flex/Grid 那种对齐和响应逻辑，连 break-inside: avoid 这种基础需求都常失效。真实项目里只要内容稍有动态性（比如用户输入、异步加载），columns 就容易把段落劈成两半、标题孤悬末列、图片错位——而且你很难 debug。
用 CSS Grid 实现可靠多列（含等高、响应式）
Grid 是目前最稳妥的替代方案，尤其适合新闻列表、卡片墙、文档侧边栏这类场景。关键不是“列数”，而是用 grid-template-columns 控制列宽 + grid-auto-flow: dense 优化填充。
-
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))—— 自适应列数，最小 280px，最大均分剩余空间 - 加
gap: 1rem控制间距，比column-gap更稳定 - 每项必须设
break-inside: avoid（针对块级子元素），否则 Grid 仍可能在内部断行 - 避免给子元素设固定高度；若需等高，用
align-items: start而非stretch（后者在内容不均时反而暴露高度差）
Flexbox 多列只适用于简单、单行/单页场景
Flex 在列数固定且内容高度相近时够用，比如工具栏图标、标签页导航。但它天生不处理“换行后对齐”——flex-wrap: wrap 后，第二行首项会左对齐，而 Grid 默认是整行对齐。
- 用
display: flex; flex-wrap: wrap; width: 100%，子项设flex: 0 0 calc(33.333% - 0.5rem)模拟三列（注意减去 gap） - 别依赖
justify-content: space-between做列间间隙，它会让最后一行不满时两端拉伸，视觉错乱 - 移动端列数变化时，必须配合媒体查询重写
flex-basis，不如 Grid 的auto-fill简洁 - 如果子项内有
position: absolute元素，Flex 容器的overflow: hidden可能意外裁剪，Grid 更宽容
兼容性与性能陷阱：IE 和长列表别硬扛
Grid 在 IE11 中需要 -ms-grid 前缀，但它的语法不支持 auto-fill 或 minmax()，实际只能写死列数。而长内容（比如上千条日志）用 Grid 渲染，Chrome 下滚动偶尔卡顿——这不是 Grid 本身问题，而是浏览器对大量 grid-area 计算的优化不足。
- 真要兼容 IE？改用 JS 分组 + 浮动模拟多列，但仅限静态内容；动态内容建议降级为单列
- 超过 500 条数据时，优先考虑虚拟滚动（如
react-window），而不是靠 CSS 列布局“撑开”DOM -
columns在 Safari 15.4+ 对transform元素仍有渲染异常，Grid 则无此问题 - 别给整个
body或html设 Grid，会导致全局布局逻辑混乱，只作用于明确容器（如article或.content-grid）
真正难的不是写出三列，而是当用户缩放页面、切换字体大小、粘贴富文本进来时，列还能保持语义完整——这点上，Grid 的显式轨道定义比 columns 的流式切分靠谱得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
