Grid 负责页面整体结构布局，Flexbox 用于组件内部元素排列，二者嵌套使用可高效构建灵活响应式界面。
Grid 和 Flexbox 是 css 中最强大的两种布局系统，它们各有优势。虽然可以单独使用，但在实际开发中，结合使用 Grid 与 Flexbox 往往能更高效地构建复杂又灵活的页面结构。关键在于理解各自的适用场景，并合理嵌套。
Grid 负责整体页面布局
CSS Grid 非常适合用来划分页面的整体结构，比如将页面分为头部、侧边栏、主内容区和页脚等区域。
通过 grid-template-areas 可以清晰定义页面骨架：
.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; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; }
这种布局方式让结构一目了然，易于维护。
立即学习“前端免费学习笔记（深入）”；
Flexbox 处理组件内部排列
在 Grid 划分出的每个区域内，使用 Flexbox 来处理子元素的对齐和分布非常自然。
例如，在头部（header）中水平排列导航链接并垂直居中：
.header { display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
又或者在侧边栏中垂直排列菜单项，并保持间距一致：
.sidebar { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
嵌套使用实现灵活响应式设计
Grid 提供宏观网格结构，而 Flexbox 在微观层面增强弹性。两者结合可轻松应对不同屏幕尺寸。
比如主内容区包含多个卡片，Grid 控制卡片的行列分布，每个卡片内部使用 Flexbox 排列标题、图片和按钮：
.main { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; padding: 20px; } .card { display: flex; flex-direction: column; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; } .card-header { background: #007bff; color: white; padding: 10px; } .card-body { padding: 15px; flex-grow: 1; } .card-footer { display: flex; justify-content: flex-end; padding: 10px; background: #f8f9fa; }
这样既保证了卡片整体的网格对齐，又让每个卡片内容具备良好的内部弹性。
基本上就这些。Grid 搭框架，Flexbox 理细节，配合起来不复杂但很实用。掌握这种组合思维，大多数布局问题都能迎刃而解。