当需同时控制行与列的结构、位置或响应式行为时，必须用 display: grid；Flexbox 仅适用于一维布局，无法实现区域级二维重组、跨行跨列定位、命名区域绑定及动态列数推导等 Grid 独有功能。
该用 display: grid 的核心判断标准很直接：当你要同时控制行和列的结构、位置或响应式行为时，display: flex 就不是正确工具。
需要显式定义行列结构时必须用 Grid
比如仪表盘有 header / sidebar / main / footer 四个语义区域，且要求在不同屏幕下重排为“header → main → footer”垂直堆叠——这本质是区域级二维重组。grid-template-areas 一行就能声明语义布局，配合媒体查询只需改一个属性值。
-
display: flex只能靠flex-direction: column模拟堆叠，但无法让 sidebar 在桌面端占左、在手机端完全消失而不影响其他区域顺序 - 用
order强行调序会破坏 DOM 语义，且无法跨断点维持区域对齐逻辑 -
grid-template-rows和grid-template-columns是容器级声明，浏览器据此生成真实轨道，而 Flexbox 的flex-basis是单个项目初始尺寸，不参与全局结构计算
要实现跨行/跨列定位时 Grid 是唯一选择
Flexbox 没有“跳格子”能力。如果你需要某个卡片横跨两行又只占半列，或者表单中一个 label 要覆盖两行输入框的高度，grid-column 和 grid-row 是唯一直接解法。
-
grid-column: 2 / span 2表示从第 2 条列线开始，跨越 2 个轨道；grid-row: 1 / -1表示从第 1 行线到最后一行线——这种坐标式定位 Flexbox 完全不支持 - 试图用嵌套
display: flex+margin或position: absolute模拟，会导致响应式失效、打印样式错乱、无障碍阅读器识别错误 - Grid 的
grid-area还能绑定命名区域，比如grid-area: hero;，比靠 class 名模拟语义更可靠
动态推导列数（如响应式卡片网格）是 Grid 独占能力
“尽可能多放几列，但每列不窄于 250px，剩余空间平均分配”——这是 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))) 的标准用法。Flexbox 做不到。
立即学习“前端免费学习笔记（深入）”；
-
flex-wrap: wrap+min-width只能粗略控制换行，第二行第一项无法与第一行第一项对齐（缺乏列约束），也无法保证等宽 -
auto-fit是 Grid 容器级行为，浏览器真实测量可用空间后动态分配轨道数；Flexbox 的flex: 1是项目级伸缩，不感知容器总列数 - Safari 14.1+ 才稳定支持
auto-fit，旧版本需降级为固定列数（如repeat(3, 1fr)）或 JS 补充，不能指望 Flexbox 替代
Grid 和 Flexbox 混用不是折中，而是分层职责
现代页面常见结构是外层 Grid 划分语义区域（header / main / aside），内层 Flex 处理区域内部对齐（如 header 里的 logo + nav + search 水平排列）。
- 不要在 Grid 容器里给子项加
display: flex来解决对齐问题——先确认是否该用justify-items或place-self - 避免 Flex 嵌套超过 3 层，视觉逻辑一旦超出一维范畴（比如既要控制行内顺序，又要控制跨行高度对齐），就该抽离为独立 Grid 区域
- 性能上，Grid 的二维计算开销略高，但差异在千分之一秒级；真正卡顿往往来自未节流的
resize监听，而非布局模型本身
最容易被忽略的一点：Grid 的 align-items 控制的是每个网格项在其单元格内的对齐方式，和 Flexbox 的 align-items（控制所有子项在交叉轴上的整体对齐）不是一回事。写错地方，效果完全不对。
