必须同时用grid定义结构层、flexbox处理内容层对齐；grid负责header/main/sidebar/footer等区域划分和响应式骨架，flexbox负责各区域内项目排列、换行与微观对齐，二者分工明确、不可混用对齐控制。
移动端布局必须同时处理“行内对齐”和“整体结构”
纯 Flexbox 在小屏上容易失控：比如一个三栏卡片列表，在 375px 宽度下，flex-wrap: wrap 虽能换行，但无法保证每行刚好两列、底部对齐一致；而纯 Grid 若用固定列数（如 grid-template-columns: repeat(3, 1fr)），在窄屏下会把卡片压得过窄，失去可读性。真实移动端需要的是——结构层用 Grid 划分大区域（header / main / sidebar / footer），内容流层用 Flexbox 控制单个区域内的项目排列与对齐。
Grid 定义响应式骨架，Flexbox 处理动态内容对齐
常见错误是试图用 Grid 解决所有问题，结果在 @media 中反复重写 grid-template-columns 和 grid-template-areas，代码膨胀且难以维护。正确做法是：
- 用 Grid 的
grid-template-areas定义语义化布局区域（如"header header" "main sidebar" "footer footer"），再配合grid-template-columns: 1fr minmax(280px, 300px)让侧边栏自适应最小宽度 - 在
main区域内部，用 Flexbox 排列文章卡片：display: flex; flex-wrap: wrap; gap: 12px;，每张卡片设flex: 1 1 calc(50% - 6px)实现双列流式填充 - 避免在 Flex 容器里嵌套 Grid，或反过来——除非有明确的跨轴控制需求（如某张卡片需横跨两行）
Flexbox 的 align-items 和 Grid 的 justify-items 不能混用
这是真正在调试时卡住 80% 开发者的地方：当 Grid 容器设置了 justify-items: center，其子元素（即使自己是 Flex 容器）的 align-items: center 可能被覆盖或失效，因为 Grid 的对齐作用于网格单元格，而 Flex 的对齐作用于主轴方向。实操建议：
- Grid 层只负责「区域定位」和「行列分配」，不干预子元素内部对齐
- 子元素内部的垂直居中、文字对齐、图标+文字基线对齐等，全部交给该子元素自己的 Flexbox 控制
- 如果发现某张卡片内容没居中，先检查它父级是否是 Grid 项且设置了
align-self或容器级align-items，优先移除 Grid 层的对齐声明
性能敏感场景下，Flexbox 渲染更轻量
Grid 的布局计算发生在渲染前，需解析整个网格定义；Flexbox 是流式计算，逐项分配空间。在滚动长列表（如商品瀑布流）中，频繁增删 DOM 节点时，Flexbox 的重排开销明显更低。所以实际组合策略是：
- 页面框架（header / nav / footer）用 Grid —— 结构稳定、变更少
- 内容区（商品列表、评论流、表单字段组）用 Flexbox —— 动态性强、节点多
- 完全避免用 Grid 实现
flex-direction: column-reverse这类单向倒序逻辑，它会让 Grid 的 track 计算变复杂，且 Safari 旧版存在渲染 bug
真正难的不是选 Grid 还是 Flexbox，而是判断哪一层该交出控制权。移动端的 DOM 结构越深，越要警惕“对齐责任错位”——Grid 管位置，Flexbox 管姿态，谁越界谁出 Bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
