Grid 定义二维骨架，Flex 处理一维排列；外层 Grid 划分区域（如 header/main），内层 Flex 排列内容（如导航对齐、卡片换行）；需注意高度传递与对齐细节，响应式中仅微调 Grid 结构或 Flex 方向。
Grid 和 Flex 混合嵌套不是“能不能用”，而是“怎么分层最省力”。核心逻辑很直接：Grid 定义页面或模块的二维骨架，Flex 处理骨架内部的一维排列。两者嵌套不冲突，反而让结构清晰、维护简单。
外层用 Grid 划分大区域
用 display: grid 搭建整体结构，比如头部、侧边栏、主内容区、底部。推荐用 grid-template-areas 直观命名区块：
grid-template-areas: "header header" "sidebar main" "footer footer"-
grid-template-columns: 240px 1fr（侧边栏固定，主内容自适应） -
grid-template-rows: auto 1fr auto（头部/底部由内容撑开，主体占满剩余高度）
每个命名区域（如 header、main）本身仍是普通容器，可独立设置 display: flex。
内层用 Flex 排列具体内容
在 Grid 分配出的某个区域内，启用 Flex 来处理动态、流式或对齐敏感的内容：
-
导航栏：logo 左对齐，菜单居中，登录按钮右对齐 →
justify-content: space-between -
卡片列表：主内容区里多个卡片横向排列、自动换行 →
flex-wrap: wrap; gap: 16px -
单张卡片内部：标题、描述、操作按钮垂直堆叠且底部对齐 →
flex-direction: column; justify-content: space-between
嵌套时的关键细节
混合使用容易踩坑的地方，集中在尺寸传递和对齐行为上：
- Grid 单元格默认不继承父容器高度，若 Flex 子项需撑满单元格，得给 Grid 行设
minmax(0, 1fr)或height: 100%，同时 Flex 容器加min-height: 0 - Flex 的
align-items: center在 Grid 单元格中可能失效，优先改用place-items: center（Grid 自带属性）或确保父单元格有明确高度 - 避免在同一个元素上反复切换
display: grid和display: flex—— 层级要分明：Grid 管“在哪”，Flex 管“怎么排”
响应式下的协同策略
屏幕变小时，不必重写整个布局，只需微调两者的配合方式：
- 大屏：Grid 保持两列（侧边栏 + 主内容），主内容内 Flex 横向排列卡片
- 小屏：Grid 改为单列（
grid-template-columns: 1fr），侧边栏折叠为顶部导航；卡片列表 Flex 改为flex-direction: column垂直堆叠 - 关键点：媒体查询只动 Grid 结构或 Flex 方向，内部对齐逻辑基本不变
