Flexbox适合一维布局，Grid才是多列排版首选；column-count仅适用于文本分栏；兼容性需按实际场景降级，不可仅依赖caniuse数据。
flexbox 适合一维布局，别硬套多列内容流
Flexbox 的设计目标是处理单行或单列的项目对齐与分布，flex-wrap: wrap 虽能折行，但无法控制“每行固定列数”或“列高自动均衡”，尤其当子项高度不一时，会出现明显的视觉断裂。比如用 display: flex + flex-wrap: wrap 布置图文卡片，第二行的顶部可能和第一行最短卡片对齐，而非所有列底部拉齐。
实操建议：
- 只在明确需要“主轴对齐+弹性收缩/拉伸”的场景用 flexbox，例如导航栏、按钮组、表单项标签+输入框组合
- 避免用
flex: 1或min-width模拟列数——浏览器不会按列重新分组，响应式断点容易错位 - 若必须用 flex 实现近似多列，需配合 JavaScript 计算并插入
（不推荐）
grid 是真正的多列排版首选，用 grid-template-columns 控制列数与宽度
CSS Grid 天然支持二维布局，grid-template-columns 直接定义列的数量、尺寸和响应行为，配合 grid-auto-rows 和 grid-gap（或 gap）即可实现整齐、等高的多列流式排版。
常见错误现象：写成 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) 却没设容器 width 或父容器约束，导致在窄屏下仍强行撑出一列，溢出视口。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 优先使用
repeat(auto-fit, minmax(，, 1fr)) auto-fit会合并空轨道，auto-fill则保留空列 - 为容器设置
width: 100%或max-width，确保 grid 在响应上下文中可缩放 - 避免混用
float或inline-block子元素——grid 子项自动成为 grid item，其他定位方式会被忽略
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
padding: 1rem;
}
column-count 不是“多列布局”，而是 CSS 分栏（类似报纸）
column-count 属于 CSS Multi-column Layout 模块，它把**单个容器的内容按文本流切分为若干垂直栏**，不适用于独立子元素（如 卡片）的排列。所有子元素会被当作连续文本一样拆开、跨栏，break-inside: avoid 只是尽量阻止分页/分栏断裂，无法保证每个子项独占一栏。
使用场景非常有限：长文阅读页、新闻摘要列表（纯段落）、带标题的说明文档——且必须接受内容被截断在栏中间的风险。
实操要点：
- 只对包裹纯文本或语义简单 HTML（如
、）的容器设column-count - 务必加
column-gap，否则栏间无间隔；column-rule可加竖线，但会影响可访问性 - 移动端慎用：小屏下
column-count: 2可能导致每栏仅容 1–2 行，阅读体验反而下降
兼容性与 fallback 要看真实用户环境，不是看 caniuse 数据库
Grid 在 IE11 中完全不可用（display: grid 会被忽略），而 flexbox 的 IE10–11 实现有多个已知 bug，比如 flex-wrap: wrap 在某些嵌套结构中失效，min-height 不触发伸缩。不能只看 “supports grid” 就认为安全。
真正要做的不是写两套样式，而是判断业务场景是否允许降级：
- 后台管理界面？直接要求 Chrome/Firefox/Edge，不兼容 IE —— 省掉所有 fallback
- 面向中老年用户的政务页面？用 float + media query 手写三栏，Grid 仅作为增强
- 电商商品列表？用
@supports (display: grid)包裹 grid 样式，外层保持 flex 基础结构（flex 不支持时再 fallback 到 inline-block）
最容易被忽略的是：Grid 的 subgrid 仍只有 Firefox 和 Chrome 118+ 支持，若想让子网格继承父网格轨道，目前没有可靠方案，只能提升层级或重构 DOM。
