css 多列布局与排版_如何使用 flexbox 和 grid 创建排版布局

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 模块，它把**单个容器的内容按文本流切分为若干垂直栏**，不适用于独立子元素（如