必须用display: grid当需同时控制行和列，如页面骨架、仪表盘行列对齐、跨行跨列定位；一维线性排列则优先用flex，二者分层混用是职责分离而非折中。
复杂网页不是“选一个就完事”，而是按布局维度分层用：一维对齐和分布用 display: flex，二维结构定义必须用 display: grid。混用不是折中，是职责分离的必然结果。
什么时候必须用 display: grid
当你需要同时控制行和列——比如页头/侧边栏/主内容/页脚的语义分区、仪表盘里图表与指标卡的行列对齐、或某区块要跨两行又占半列，grid-column: 2 / span 1; grid-row: 1 / span 2 一行定位，flex 做不到。
- 页面骨架级响应式切换（桌面五区 → 平板三区 → 手机垂直堆叠）靠
grid-template-areas+ 媒体查询，不用改 HTML，也不用嵌套三层flex -
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))自动适配列数，比写一堆@media断点干净得多 - 侧边栏从固定宽过渡为可折叠抽屉，用
grid-template-columns: 0fr 1fr+transition更可控，flex得靠width+max-width+overflow组合硬凑
什么时候优先用 display: flex
处理线性排列问题——导航栏菜单、表单控件左右配对、卡片内标题+图片+按钮的垂直堆叠，flex-wrap: wrap + gap 就能撑起响应式卡片流，子项增减不影响结构。
-
justify-content和align-items两行就能居中任意单个元素，不用设网格线或命名区域 - 子项高度不一致但要等高？默认
align-items: stretch就生效，无需额外 hack - 移动端折叠侧边栏？直接对某项设
display: none，其余项自动撑满，不用改布局定义 - 注意陷阱：
height: 100%在flex子项里常失效——父容器没显式高度，继承就断了；改用min-height: 0或明确设height
混用时最容易踩的坑
在 grid 容器里给子项又设 display: flex 是合理操作；但若子项内部再套一层 display: grid，大概率是层级职责没分清。
-
grid容器内设justify-content是无效的——它只响应justify-items或justify-self；同理，flex子项设grid-column，浏览器直接忽略 -
flex嵌套超过 3 层时，视觉逻辑已超一维范畴，重排开销明显上升，此时该考虑抽离为独立grid区域 - 真正容易被忽略的不是“选哪个”，而是容器尺寸约束和溢出行为——无显式高度时，
flex子项的height: 100%失效，grid的minmax()在滚动中可能触发频繁重算
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
