三栏布局中，Flexbox适合轻量响应式场景，而Grid在跨设备重排、精确行列对齐及复杂嵌套时更优；前者够用于动态内容与简单顺序调整，后者胜在结构化语义与维护性。
直接说结论：三栏布局在大多数响应式场景下，Flexbox 更轻量、更可控；但当涉及跨设备多区域重排（比如桌面三栏 → 平板双栏 → 手机单栏，且各栏内容语义固定）、需精确行列对齐、或存在复杂嵌套定位需求时，Grid 的结构表达力和维护性明显胜出。
Flexbox实现三栏布局：什么时候够用，什么时候开始卡壳
用 display: flex 搭配 flex: 1 / flex: 0 0 200px 是最常见做法。它天然支持等高、自动换行（flex-wrap: wrap），也容易通过 order 调整视觉顺序。
- ✅ 中间栏内容动态增长？加
min-height: 0就能生效overflow: auto—— 不加这句，滚动条大概率失效 - ✅ 平板断点想隐藏侧边栏？直接
display: none，其他栏自动撑满，无需重写网格定义 - ❌ 多层嵌套后想让某个子项“跳到第二行第一列”？
Flexbox没有行列坐标概念，只能靠flex-wrap+margin或额外 wrapper，结构迅速变脏 - ❌ 需要某栏跨两行、另一栏只占半列？
Flexbox无法原生支持，必须拆 DOM 或用 JS 补位
Grid实现三栏布局：何时值得为复杂度买单
Grid 的优势不在“做三栏”，而在“定义三栏背后的逻辑关系”。比如用 grid-template-areas 声明 "header header header" "sidebar main aside" "footer footer footer"，后续所有媒体查询只需改这一行模板，不用动 HTML 结构。
- ✅ 想让手机端
main区域永远排第一，不管 HTML 顺序？用grid-area: main+order配合媒体查询，比 Flexbox 的order更稳定（不受主轴方向影响） - ✅ 侧边栏在桌面端固定 240px，但在平板端希望它变成“可折叠抽屉”，且不影响主内容流？
Grid可用grid-template-columns: 0fr 1fr+transition实现无损缩放，Flexbox 得靠width+max-width+overflow组合拳，容错更低 - ❌ 简单居中一个按钮组？写
display: grid; place-items: center是杀鸡用牛刀，display: flex; justify-content: center; align-items: center更直觉、更少歧义 - ❌ IE11 兼容必须保？
Grid在 IE11 中仅支持旧语法（display: -ms-grid），且不支持subgrid、gap等关键特性，实际项目中几乎不可维护
响应式切换时最容易被忽略的陷阱
无论选 Flexbox 还是 Grid，真正翻车的点往往不在布局本身，而在容器尺寸约束和溢出行为。
立即学习“前端免费学习笔记（深入）”；
- Flex 容器里子项设了
height: 100%却没给父容器设高度？它不会继承，会塌成 0 —— 改用min-height: 0或显式height - Grid 容器用了
grid-template-rows: 1fr auto，但内容超长导致整体高度失控？加max-height: 100vh和overflow: hidden到容器，否则1fr会无限拉伸 - 媒体查询中同时改
flex-direction和grid-template-columns？别混用。同一容器不能既display: flex又display: grid，切换时务必确保 CSS 层级干净，避免旧规则残留 - 用
gap控制间距？Flexbox的gap在 Safari 14.1+ 才完全稳定，老版本需降级为margin；Grid的gap兼容性好得多（Chrome 66+、Firefox 63+、Safari 16.4+）
真正难的不是选 Flexbox 还是 Grid，而是判断“这个三栏，到底是临时排列，还是长期结构契约”。前者用 Flexbox 快速交付，后者用 Grid 建立语义契约——一旦定下 grid-area 名称，改需求时连 HTML 都不用碰。
