Grid负责整体布局，Flex处理局部对齐，二者结合实现多屏适配；通过12列响应式Grid划分结构，在header/footer用Flex对齐内容，卡片组用Grid分行分列，内部用Flex排列元素；配合媒体查询与容器查询，设置auto-fit和minmax实现自适应列数，移动断点下使用flex-direction切换排布方向，@container使组件在小容器中自动紧凑显示；嵌套使用时外层Grid定框架，内层Flex或Grid控细节，避免过度嵌套，保持结构清晰，利用gap统一间距，提升复杂界面的灵活性与一致性。
在现代网页开发中，实现多屏适配的布局是前端工程师的核心任务之一。CSS 的 Grid 和 Flex 布局各有优势，Grid 适合整体页面结构划分，Flex 擅长处理容器内元素的对齐与空间分配。将两者结合使用，能更灵活地应对不同屏幕尺寸下的布局需求。
Grid 负责整体结构，Flex 处理局部对齐
使用 Grid 可以快速搭建页面的整体网格框架，比如将页面划分为头部、侧边栏、主内容区和底部。每个区域可以独立设置大小和位置，尤其适合二维布局（行和列同时控制）。
而在某个 Grid 区域内部，例如导航栏或卡片列表，使用 Flex 可以轻松实现子元素的水平或垂直居中、等间距分布、自动换行等效果。
- 用 Grid 划分页面为 12 列响应式网格容器
- 在 footer 或 header 内部使用 Flex 实现图标与文字的对齐
- 卡片组用 Grid 布局分行分列，每张卡片内部用 Flex 排列标题、图片和按钮
媒体查询配合容器查询实现精准适配
传统响应式设计依赖视口宽度的媒体查询（@media），但随着组件化趋势，容器查询（@container）提供了更精细的控制方式。Grid 容器可设为响应式列宽，结合媒体查询调整断点。
立即学习“前端免费学习笔记（深入）”；
当屏幕变窄时，Grid 自动从三列变为两列甚至单列，而每个网格项内部的 Flex 布局也相应调整方向，比如从横向排列转为纵向堆叠。
- 设置 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 实现自适应列数
- 在移动断点下，flex-direction: column 让导航菜单垂直排列
- 利用 @container 查询让组件在小容器中自动切换紧凑样式
嵌套使用提升布局灵活性
Grid 支持嵌套，外层 Grid 定义大区块，内层 Grid 或 Flex 处理细节。这种组合特别适用于仪表盘、商品列表、图文混排等复杂界面。
例如一个新闻列表页：外层用 Grid 分成左侧主推区和右侧推荐区；主推区内用 Flex 垂直排列标题与摘要；推荐区使用 Flex wrap 实现多行卡片流式布局。
- 避免过度嵌套，保持 HTML 结构清晰
- 给嵌套容器设置 min-height 防止内容塌陷
- 通过 gap 属性统一网格与弹性盒之间的间距规范
基本上就这些。Grid 和 Flex 不是互斥方案，而是互补工具。掌握它们的适用场景并合理搭配，能让页面在手机、平板、桌面等各种设备上都呈现良好视觉效果和用户体验。关键是理解结构层级：Grid 管“大局”，Flex 管“细节”。
