Grid适合页面整体二维布局，Flexbox擅长组件内一维排列，二者结合使用可高效构建清晰易维护的界面结构。
在现代网页布局中，CSS Grid 和 Flexbox 各有优势。虽然它们都能实现复杂的布局，但结合使用能更高效地解决不同层级的布局需求。Grid 更适合整体页面结构，而 Flexbox 擅长处理组件内部的一维排列。
用 Grid 构建页面整体结构
将 Grid 用于页面级别的布局，比如划分头部、侧边栏、主内容区和页脚。
例如：
.container {display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
这种结构清晰地定义了页面的二维布局，每个区域通过 grid-area 分配元素即可。
立即学习“前端免费学习笔记（深入）”；
用 Flexbox 处理组件内部排列
在 Grid 划分出的某个区域内（如 header 或 main），使用 Flexbox 来对齐按钮、导航项或卡片列表等子元素。
例如，header 内部的导航菜单居中对齐：
header {display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
或者在 main 区域内水平排列几张卡片，并自动换行：
.card-group {display: flex;
flex-wrap: wrap;
gap: 1rem;
}
何时选择 Grid，何时用 Flexbox？
判断依据在于布局方向和复杂度：
- 使用 Grid：需要同时控制行和列，比如仪表盘、图片网格、多区域页面模板。
- 使用 Flexbox：元素沿一个方向排列（水平或垂直），如导航栏、按钮组、表单字段对齐。
- 组合使用很自然：Grid 做“大框架”，Flexbox 填充“小细节”。
基本上就这些。合理分工让代码更清晰，维护更容易。不复杂但容易忽略的是：不要强行统一用一种方式解决所有布局问题。
