flex转grid必须先设轨道（如grid-template-columns: 1fr），否则仅改display无效；fr与flex-grow行为不同，不能直接替换；justify-content作用于轨道整体，justify-items作用于单格内容对齐。
直接改 display: flex 为 display: grid 不行——Grid 没有主轴/交叉轴继承关系，子项的 align-self、justify-content 会全部失效，视觉错乱几乎是必然的。
哪些容器必须先改 display 值并定义轨道
Flex 容器转 Grid 的第一步不是动子项，而是让父容器“真正成为网格”。只改 display 不设轨道，等于画了个空棋盘，子项还是按默认单列流式排列，和 Flex 表现毫无区别，还丢了原有对齐逻辑。
- 必须显式设置
grid-template-columns或grid-template-rows（哪怕只是1fr），否则网格结构不存在 - 原 Flex 中用
flex-wrap: wrap实现多行的，别硬塞进grid-template-columns；改用grid-auto-flow: dense+grid-auto-rows更自然 - 带固定宽度+自适应混合的（如 logo 固定 200px + 内容占满剩余），写成
grid-template-columns: 200px 1fr，不是repeat(2, 1fr)
fr 单位和 flex-grow 数值不能一对一替换
fr 分配的是“剩余空间”，flex-grow 分配的是“可用正空间”（父宽减去所有子项基础尺寸之和）。当子项有 width、min-width 或内容撑开时，两者行为差异立刻暴露。
- 把
flex: 2直接换成grid-column: span 2是常见错误：后者控制跨列数，不控制宽度比例 - 纯等分三栏 → 用
grid-template-columns: 1fr 1fr 1fr，比repeat(3, 1fr)更直观，也避免嵌套repeat()引发的解析歧义 - 想模拟
flex-shrink: 1效果？加minmax(0, 1fr)，比如grid-template-columns: 200px minmax(0, 1fr)
justify-content 和 justify-items 别混用
Flex 里一个 justify-content 管全局，Grid 拆成了两层：一个是轨道整体对齐（justify-content），一个是每个格子内元素对齐（justify-items 或单个 justify-self）。
- 导航栏中菜单左对齐、登录按钮右对齐 → Flex 靠
margin-left: auto，Grid 必须给按钮单独加justify-self: end - 整行居中 → 用
justify-content: center（作用于轨道整体） - 误用
justify-items: center想让某一个按钮居中？它会让所有子项都在各自格子里居中，破坏原有布局意图
最易被忽略的点是：Grid 的隐式轨道（implicit grid）行为和 Flex 的自动换行完全不同。当子项数量超出显式定义的行列时，Grid 默认创建新行/列，但它们的尺寸由 grid-auto-rows 或 grid-auto-columns 控制——漏设这个，新行高度可能塌缩为 0，内容直接消失。重构时务必检查所有动态插入或条件渲染的子项是否仍落在显式轨道内。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
