在构建现代Web界面时，很多复杂的页面既需要整体结构的稳定划分，又需要局部内容的灵活排布。CSS Grid与Flexbox虽然都能实现布局，但设计初衷不同：Grid是二维布局系统，适合同时控制行与列；Flex是一维布局系统，适合沿单一方向排列元素。将两者混合使用，可以让页面骨架与组件内部各司其职，降低维护成本。
一、Grid与Flex的核心差异
CSS Grid通过display: grid定义容器，并使用grid-template-columns和grid-template-rows显式声明轨道。它能在二维平面上把区域切成规整的格子，特别适合页面级布局，比如头部、导航、内容区、底部footer的划分。Grid的子项可以跨行跨列，且对齐是基于网格线完成的，不会因为内容长度变化而破坏整体结构。
Flexbox通过display: flex定义容器，子项沿主轴排列，依靠flex-grow、flex-shrink和flex-basis分配空间。它更关注一维流内的弹性分配，例如让一组按钮右对齐、让卡片列表自动换行并等分宽度。Flex在处理未知数量子元素的对齐与伸缩时非常直观，但如果用它强行模拟二维布局，往往会导致嵌套层级爆炸。
| 特性 | CSS Grid | Flexbox |
|---|---|---|
| 维度 | 二维（行与列） | 一维（行或列） |
| 典型用途 | 页面骨架、仪表盘 | 组件内排布、工具栏 |
| 子项跨越 | 支持跨轨道 | 仅沿主轴伸缩 |
二、混合使用的典型场景
一个常见后台页面包含顶部栏、左侧菜单和右侧主内容。如果只用Flex，需要将外层设为纵向Flex，内部再套横向Flex，主内容里又要套列表Flex，嵌套很深。改用Grid后，只需在外层声明三行两列的模板，把顶部跨满列，左侧和主内容放在第二行即可。
在主内容区域内部，我们经常要放一排筛选条件，后面跟一堆数据卡片。此时主内容容器本身是Grid的一个格子，但内部可以再设成Flex：筛选栏用justify-content: space-between排开，卡片列表用flex-wrap: wrap自动换行。这样页面结构清晰，组件也足够灵活。
<div class="layout">
<header class="top">顶部栏</header>
<aside class="side">左侧菜单</aside>
<main class="main">
<div class="filter">
<span>筛选A</span>
<span>筛选B</span>
</div>
<div class="cards">
<div class="card">卡片1</div>
<div class="card">卡片2</div>
</div>
</main>
</div>
对应的基础样式
下面这段CSS展示了如何用Grid画骨架，再在.filter和.cards里用Flex做局部布局。注意Grid容器直接规定了区域大小，而Flex只负责自己格子内的流向。
.layout {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 60px 1fr;
height: 100vh;
}
.top {
grid-column: 1 / 3;
background: #f0f0f0;
}
.side {
background: #e0e0e0;
}
.main {
padding: 10px;
}
.filter {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.cards {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.card {
flex: 1 1 120px;
background: #fff;
border: 1px solid #ccc;
padding: 8px;
}
三、优化实践中的注意事项
混合布局虽好，但不要在每个容器上都无脑加Grid或Flex。一般规则是：页面级或区块级用Grid，组件内或文本流用Flex。如果Grid单元格内结构也很复杂，可以继续嵌套Grid，而不是退回到Flex去模拟二维。
另一个容易忽略的点是响应式。Grid可以用grid-template-areas配合媒体查询整体重排区域，比用Flex层层调整方向更可靠。例如在窄屏时把侧边栏移到底部，只需改网格模板，主内容里的Flex不用动，从而减少样式冲突。
布局优化的本质，是让合适的工具做合适的事：Grid管“在哪”，Flex管“怎么排”。
四、简单性能对比
从浏览器渲染角度看，深层Flex嵌套会在内容变化时触发多次重排，因为父Flex尺寸依赖子项。Grid由于轨道尺寸多已声明，子项变化对兄弟轨道影响较小。在某中台项目里，把九层Flex改成Grid加Flex后，列表增删时的重排时间从约45毫秒降到30毫秒左右，交互卡顿明显减少。
当然性能差异不是绝对，关键还看DOM规模与变动频率。但混合布局带来的代码可读性提升，往往比微小的性能收益更重要：新成员能一眼看懂骨架，不必数Flex嵌套层数。
小结建议
动手前先画布局图：横竖都要切的就上Grid，只剩一条流向的就上Flex。写完后检查是否有超过三层的同类型布局嵌套，如果有，考虑用另一种布局替换外层或内层。熟练之后，你会自然形成“Grid在外、Flex在内”的直觉。