Grid 适合二维布局，Flexbox 擅长一维排列，二者结合可高效构建响应式页面。用 Grid 定义整体结构，如通过 grid-template-areas 划分头部、侧栏等区域，并利用 fr 单位和媒体查询实现自适应；在 Grid 区域内使用 Flexbox 处理导航、卡片等子元素的对齐与分布；不同断点下可切换布局模式，如桌面端用 Grid 三栏，移动端转 Flexbox 堆叠；核心原则是 Grid 管全局、Flexbox 管局部，按需组合以提升代码语义与维护性。
在现代网页开发中，CSS Grid 和 Flexbox 各有优势。Grid 适合二维布局（行和列），Flexbox 擅长一维排列（单行或单列）。将两者结合使用，能更灵活地构建复杂且响应式的页面结构。
用 Grid 构建整体页面框架
对于页面的整体布局，比如头部、侧边栏、主内容区、底部等区域的划分，CSS Grid 是理想选择。它能轻松定义网格区域，并在不同屏幕尺寸下重新排列这些区域。
- 使用 grid-template-areas 定义清晰的布局区块，提升可读性
- 配合 minmax() 和 fr 单位实现自适应列宽
- 通过媒体查询调整网格结构，适配移动端
示例：桌面端三栏布局，移动端堆叠为单列。
在 Grid 区域内使用 Flexbox 处理子元素排列
Grid 负责“大格子”，而每个格子内部的内容排列交给 Flexbox。例如导航菜单、卡片列表、按钮组等，往往需要水平或垂直居中、等间距分布，这正是 Flexbox 的强项。
立即学习“前端免费学习笔记（深入）”；
- 在 header 中用 display: flex 对齐 logo、导航和搜索框
- card 组件内部用 Flexbox 控制标题、图片、描述的顺序与对齐方式
- 即使容器尺寸变化，Flex 项目的动态伸缩仍能保持良好视觉效果
响应式断点中灵活切换布局模式
不同设备上可以切换 Grid 和 Flexbox 的使用策略。例如在桌面端用 Grid 实现 Masonry 布局，在小屏幕上改用 Flexbox 垂直堆叠。
- 利用媒体查询，在大屏启用 grid-template-columns: repeat(3, 1fr)
- 在手机端设为 flex-direction: column 或简化为单列 grid
- 结合 auto-fit 与 minmax 实现自动换行的弹性网格
基本上就这些。Grid 管全局，Flexbox 管局部，两者互补。掌握它们的适用场景，就能高效写出语义清晰、维护性强、响应灵敏的布局代码。不复杂但容易忽略的是：别强行用一种技术解决所有问题，按需组合才是关键。
