Grid负责整体结构划分，Flex处理内容弹性排列。示例中Grid分为侧边栏与主内容区，主区内用Flex wrap实现卡片自动换行；也可在Flex容器中嵌套Grid子项，如后台系统顶部导航用Flex，工作区统计卡用Grid；响应式设计可通过媒体查询在小屏用Flex wrap，大屏切换为Grid布局；一维布局选Flex，二维布局选Grid，避免过度嵌套，实现职责分明的高效布局。
在现代网页布局中，Flexbox 和 Grid 是两大核心 CSS 布局工具。虽然它们各自都能独立完成复杂布局，但在实际开发中，将 Flex wrap 与 Grid 网格排列 混合使用，能更灵活地应对动态内容和响应式设计需求。
Grid 容器内使用 Flex 子项进行换行排列
当 Grid 划分出整体区域后，某个网格单元格内的子元素可能数量不固定（如标签、卡片列表），这时可在 Grid 的某个单元格中启用 Flex 并开启 wrap，实现内部的自动换行布局。
例如：页面采用 Grid 分成侧边栏和主内容区，主内容区内的项目用 Flex wrap 自动排列。
示例代码：
.container {
display: grid;
grid-template-columns: 200px 1fr;
height: 100vh;
}
.sidebar {
background: #f0f0f0;
}
.main-content {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 16px;
}
.card {
flex: 0 0 calc(33.33% - 16px);
background: #ddd;
height: 100px;
}
这样，Grid 负责整体结构划分，Flex 负责内容区域的弹性排列，结合紧密且职责分明。
Flex 容器中嵌套 Grid 子项用于局部复杂布局
有时主结构适合用 Flex 布局（如水平导航+内容区），但其中某一部分需要二维网格控制（比如仪表盘中的小模块），此时可在 Flex 容器中放置一个 Grid 子元素。
常见于后台管理系统：顶部导航为 Flex，下方工作区使用 Grid 展示统计卡片。
关键点：
- 外层 Flex 控制主轴方向和空间分配
- 内部 Grid 区域独立定义行列，不受外层影响
- Grid 子项可自适应父容器宽度
响应式混合布局：不同断点切换策略
在移动端优先设计中，可以小屏幕用 Flex wrap 实现纵向堆叠或单行多列，大屏幕切换为 Grid 进行更精细的二维排布。
媒体查询示例：
.layout {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.layout > .item {
flex: 1 1 100%;
}
@media (min-width: 768px) {
.layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
}
这种写法让小屏保持简单流式布局，大屏发挥 Grid 的行列优势，用户体验更自然。
避免嵌套过度，合理分工
不是所有情况都需要混合使用。基本原则是：
- 一维布局优先选 Flex（如导航、按钮组）
- 二维布局优先选 Grid（如页面骨架、表格式展示）
- Grid 做宏观结构，Flex 处理微观排列
混合使用的本质是“各司其职”——Grid 管区域划分，Flex 管内容流动。掌握这一点，就能避免结构混乱。
基本上就这些。灵活运用两种布局模型的组合，能让页面既结构清晰又具备良好的扩展性。
