Grid是当前实现多列布局最合理的选择，因其直接可控、支持自动换列、统一gap、跨列灵活且渲染高效；浮动虽兼容性好但属hack用法，易致塌陷、错位且维护困难。
浮动实现多列布局：现在还能用，但得知道代价
浮动（float）确实能实现多列，但它本质是为图文环绕设计的，不是为页面布局。强行用它做多列，会触发 BFC、影响父容器高度、需要手动清除浮动，现代项目中基本不推荐。
常见错误现象：父容器高度塌陷、后续元素位置错乱、响应式断点难维护。
- 必须给父容器加
overflow: hidden或伪元素::after { content: ""; display: table; clear: both; }来清除浮动 - 列宽需用
%或px显式设置，无法自动均分或按内容自适应 - 无法控制列间间距（
gap），只能靠padding或margin模拟，易引发盒模型计算错误 - 在 Flex/Grid 已成标准的今天，继续用浮动写多列，相当于主动放弃对齐、顺序、响应式的原生支持
Grid 实现多列布局：直接、可控、可预测
CSS Grid 是目前最合理的选择，尤其适合「明确列数」或「按最小宽度自动换列」的场景。关键在于正确使用 grid-template-columns 和 grid-auto-flow。
典型使用场景：文章三栏列表、卡片网格、仪表盘模块布局、响应式产品展示。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
-
grid-template-columns: repeat(3, 1fr)→ 固定 3 列等宽 -
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))))→ 最小 300px，最多填满容器，自动计算列数 - 列间距统一用
gap: 1rem，无需 hack，且不影响子项box-sizing - 单个子项可跨列：
grid-column: 1 / -1（横跨全部列），或grid-column: span 2
article {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))));
gap: 1.25rem;
}
<p>article > section {
background: #f8f9fa;
padding: 1rem;
}浮动 vs Grid 的兼容性与性能差异
浮动全浏览器支持（IE6+），Grid 在 IE 中仅部分支持（需 -ms-grid 前缀，且无 auto-fit），但现代项目基本已放弃 IE11 及以下。性能上，Grid 渲染更高效——浏览器一次性计算整个网格轨道，而浮动需反复重排（reflow）和重绘（repaint）。
- 若需兼容旧版 Safari（grid-template-columns: repeat(3, 1fr) 安全；
auto-fit需检查 Can I Use 数据 - 浮动在复杂嵌套中容易因
zoom、hasLayout触发不可控渲染行为；Grid 则完全隔离布局逻辑 - 动画支持：Grid 本身不支持
transition列宽变化，但可通过transform或max-width配合 JS 控制；浮动动画更难收敛
什么时候该考虑其他方案？
如果目标是「文字内容自动分栏」（如长文阅读），别用浮动或 Grid —— 应该用原生 column-count 或 column-width。它们专为此设计，支持断行、跨栏标题（break-before: column）、栏间距（column-gap）。
-
column-count: 3→ 强制分 3 栏，内容纵向流式填充 -
column-width: 12em→ 每栏至少 12em，浏览器决定最终列数 - 注意：
column-*对display: inline-block或flex子项无效，只作用于文本流
article.text-columns {
column-count: 3;
column-gap: 2rem;
column-rule: 1px solid #e9ecef;
}多列布局没有银弹。Grid 解决结构化区块，column-* 解决连续文本流，浮动只是历史遗留路径——除非你在维护一个 2012 年的后台系统，否则别让它出现在新代码里。
