Grid负责页面整体骨架布局，Flexbox处理区域内部对齐；1. 用Grid定义宏观结构如头部、侧边栏、主内容区和页脚的二维排列；2. 在Grid区域内使用Flexbox实现导航项均匀分布或内容垂直居中等一维弹性布局；3. 响应式设计中大屏用Grid多列、小屏用Flexbox堆叠，或在Grid不变下通过Flexbox调整子元素；4. 避免过度嵌套，按需分工：二维布局选Grid，一维对齐选Flexbox，容器内自动填充用Flexbox更佳。二者协同提升布局效率与可维护性。
Flexbox 和 Grid 是 CSS 中最强大的两种布局工具，它们各有优势。合理结合使用，能更高效地构建复杂且响应式的页面结构。
1. 用 Grid 做整体页面布局
Grid 非常适合划分整个页面的宏观结构，比如头部、侧边栏、主内容区和页脚的排列。
通过 grid-template-areas 可以直观定义区域分布，清晰易维护。
示例：
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-rows: 60px 1fr 40px;
grid-template-columns: 200px 1fr;
height: 100vh;
}
header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }
2. 在 Grid 区域内使用 Flexbox 处理内部对齐
虽然 Grid 擅长二维布局，但在某个区域内实现水平或垂直居中、等分布局时，Flexbox 更简洁直观。
立即学习“前端免费学习笔记（深入）”；
比如在 header 或 footer 中让导航项均匀分布，或让内容在单元格内居中。
示例：
- header 内部导航项等宽分布：
header {
display: flex;
justify-content: space-between;
align-items: center;
}
main {
display: flex;
flex-direction: column;
justify-content: center;
}
3. 响应式设计中的协同使用
在不同屏幕尺寸下，可灵活切换策略：大屏用 Grid 划分多列，小屏用 Flexbox 堆叠内容。
也可以保持 Grid 主结构不变，在子容器中用 Flexbox 自适应内部元素排列。
技巧：4. 避免过度嵌套，按需选择
不是所有地方都需要同时使用两者。明确分工能提升代码可读性。
基本原则：
- 二维布局（行列都控制）→ 使用 Grid
- 一维布局（只关心行或列）→ 使用 Flexbox
- 容器需要自动填充或对齐内部元素 → Flexbox 更合适
基本上就这些。Grid 负责“骨架”，Flexbox 负责“肌肉”，配合得当，布局更轻松。不复杂但容易忽略的是：别强行套用，按实际结构选工具才是关键。
