必须用 display: grid——flexbox 无法同时控制行列，grid 支持跨行跨列定位、语义化区域重排、稳定卡片网格及精准响应式控制，而 flexbox 仅适用于组件内一维布局。
必须用 display: grid——Flexbox 不是“不够好”，而是根本没设计来同时控制行和列。
需要跨行跨列定位时，grid-column 和 grid-row 是唯一解
比如某张数据卡片要横跨两列、纵跨三行，Grid 只需两行声明：grid-column: 1 / span 2; 和 grid-row: 2 / span 3;。Flexbox 没有行列坐标系，只能靠嵌套 wrapper + flex-direction: column + 多层 flex: 1 模拟，视觉逻辑和 DOM 结构迅速失控。
- 嵌套超过两层 flex 容器后，调试成本陡增，Chrome DevTools 的 Layout 树深度翻倍
- Flex 子项无法直接“跳过”某一行或列，order 属性只影响顺序，不改变物理位置
- 当卡片高度不一致时，flex-wrap 换行行为依赖项目实际高度，第二列首项容易被挤到第三行，造成视觉错位
响应式区域重排（如桌面五区 → 手机单列）只靠 grid-template-areas
桌面端写 grid-template-areas: "header header" "sidebar main" "footer footer";，手机断点里改成 "header" "main" "footer"，结构切换干净利落。Flexbox 没有“区域”概念，只能靠 order + display: none + 多个 wrapper 包裹，resize 时易触发多次重排，且侧边栏未设 flex-basis: 0 仍会占空间。
- 用
flex-direction: column模拟垂直堆叠，但原row布局的子项宽度仍继承父容器，常导致横向滚动 - JS 动态控制显隐类名，在快速 resize 或动画中易丢帧
-
grid-template-areas支持语义命名，可读性高，CSSOM 解析开销远低于一堆order和flex组合
固定列数卡片网格优先用 grid-template-columns: repeat(2, 1fr)，别碰 auto-fit + minmax() 在低端机上
移动端做 2 列或 3 列卡片流，repeat(2, 1fr) 加 gap 最稳。用 repeat(auto-fit, minmax(250px, 1fr))) 虽然灵活，但在旧款安卓 WebView 或低端 iOS 设备上，每次 resize 都触发二维轨道重算，Layout 耗时可能从 4ms 升至 9ms 以上。
- 务必加
gap，别用margin模拟——gap不参与盒模型计算，无塌陷风险 - 防空内容塌陷：加
grid-auto-rows: minmax(100px, auto) - 禁用
fr和像素混写（如1fr 200px），小屏下极易触发横向滚动
Flexbox 留在组件内部做微调，别让它扛骨架
Grid 定义页面级二维结构（header/sidebar/main/footer），Flexbox 专注其内部一维对齐：导航栏菜单水平排布、卡片内标题+图片+按钮垂直堆叠、表单控件左右配对。两者混用合法，但属性不能越界——在 Grid 容器的子项上写 justify-content 无效；在 Flex 容器的子项上写 grid-column 浏览器直接忽略。
- Grid 容器内子项再设
display: flex没问题，但若它内部又设display: grid，大概率说明该抽成独立容器了 - 子项高度不一致？Grid 下用
align-items: start控制对齐，别给它加height或min-height，否则可能破坏grid-auto-rows的自动计算 - 移动端折叠侧边栏，Grid 只需改
grid-template-columns: 0fr 1fr+transition，Flexbox 得凑width+max-width+overflow，控制粒度粗得多
真正容易被忽略的是：Grid 的“自由度”越低，越稳。写死列数、少用命名区域、避免嵌套 Grid，不是退化，而是面向真实设备的取舍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
