Grid负责宏观二维布局，Flexbox处理局部一维排列。通过嵌套使用Grid与Flexbox，结合响应式设计与传统CSS属性，可高效构建灵活、易维护的页面结构，实现全局与细节的协调统一。
在现代网页开发中，CSS布局方式已经非常丰富。Flexbox和Grid是目前最主流的两种布局模型。虽然它们都能实现复杂的页面结构，但各有侧重。将CSS传统布局技巧与Grid结合使用，能更高效地构建灵活、响应式的用户界面。
理解Grid与常规布局的分工
Grid适合处理二维布局（行和列），而Flexbox更适合一维排列（单行或单列）。在实际项目中，可以用Grid划分整体页面结构，比如页头、侧边栏、主内容区、页脚等，然后在局部组件内部使用Flexbox或其他CSS布局方式来微调元素排列。
- 使用Grid设置页面的整体网格框架
- 在某个Grid单元格内，用Flexbox对按钮组、导航项等进行水平或垂直居中
- 结合margin、position等传统CSS属性处理特殊定位需求
嵌套Grid与Flexbox的实用场景
Grid容器中的项目本身也可以是Flex容器。这种嵌套方式非常实用。例如，在一个Grid划分的卡片区域中，每张卡片需要内容垂直居中，此时可在Grid item中启用display: flex。
示例代码：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.card {
background: #f0f0f0;
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
这样既利用Grid实现了多列响应式布局，又通过Flex让每个卡片内部元素自然对齐。
立即学习“前端免费学习笔记（深入）”；
响应式设计中的协同工作
在不同屏幕尺寸下，可以动态调整布局模式。比如移动端使用Flex垂直堆叠，桌面端切换为Grid网格。也可以固定使用Grid为主结构，但在小屏下改变Grid的列数，并在单元格内部改用Flex重新排列子元素。
- @media查询中可切换grid-template-columns的值，如从repeat(3, 1fr)变为1fr
- 配合Flex的flex-direction，实现同一结构在不同设备上的合理展示
- 使用minmax()和auto-fit让Grid自动适配，内部元素仍可用Flex控制间距
避免冲突的关键原则
Grid会重置其直接子元素的某些布局行为。例如，Grid项目会忽略float、vertical-align和clear，同时display: inline或block会被强制转换为block级网格项。因此注意以下几点：
- 不要在Grid直接子元素上使用float或绝对定位（除非有明确需要）
- 若需在Grid项中使用Flex，确保它是该Grid项的直接子元素
- 合理使用align-self、justify-self控制单个网格项的位置
基本上就这些。Grid负责宏观结构，其他CSS布局手段负责微观细节，两者互补而非互斥。掌握它们的协作逻辑，能让页面结构更清晰、维护更方便。不复杂但容易忽略。
