直接改display: flex为display: grid不会生效，因grid是二维布局模型，需显式定义grid-template-columns/rows轨道，否则子项堆叠左上角；flex-wrap、flex-grow等无直接对应，须用auto-fit+minmax或fr重写。
直接改 display: flex 为 display: grid 不会生效，且大概率导致子项错位、撑破容器或完全消失——Grid 不是 Flex 的“升级版”，而是维度不同的布局模型。
先判断：这个 Flex 容器是否真该换成 Grid
不是所有 Flex 都需要重构。只在以下情况才值得动：
- 当前布局需同时控制行和列（比如卡片网格、仪表盘、表单字段+标签+错误提示的二维对齐）
- 存在多层嵌套 Flex（如
.wrapper → .row → .col → .item），维护成本高且响应式逻辑分散 - 需要跨项目重排（如竖屏时把原属不同 Flex 容器的元素拉到同一列中），而
order在嵌套结构下失效 - 现有 Flex 用大量
margin: auto、flex-basis+min-width组合强行模拟网格，CSS 已难读难调
如果只是导航栏、按钮组、媒体对象这类单轴排列，保留 Flex 更轻量、兼容性更好。
改什么：父容器必须重定义轨道结构
Flex 的 justify-content 和 align-items 在 Grid 中没有直接对应属性；Grid 的尺寸分配由轨道决定，而非子项弹性系数。
- 必须显式设置
grid-template-columns或grid-template-rows，否则display: grid后子项会堆叠在左上角（默认单列隐式网格） - 原 Flex 的
flex-wrap: wrap不能靠grid-template-columns: repeat(3, 1fr)硬套——应改用grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)))+gap - 原
flex: 1 1 200px不等于grid-column: span 1；正确写法是grid-template-columns: 200px 1fr，其中1fr分配剩余空间 - 若子项有固定宽高（如
width: 100%; padding: 1rem），Grid 下易溢出，需加min-width: 0或overflow: hidden防止撑破
怎么调：DevTools 里一眼定位错位原因
Chrome 或 Firefox 的网格调试功能比 Flex 调试直观得多，但前提是开启正确开关：
- 在 Elements 面板选中父容器，右键 → “Show grid areas” —— 若没显示网格线，说明
grid-template-*没生效或值为none - 检查子项是否被
grid-column/grid-row显式定位；若有，先注释掉再看默认位置，排除定位覆盖干扰 - 常见错位现象：
margin-left: auto居右失效 → 是因子项被grid-column: 1 / -1锁定列范围，删掉该声明即可恢复自动外边距行为 - 子项高度塌缩 → 查看是否设了
height: 100%但父容器没设明确高度；Grid 默认不拉伸，align-items: stretch只在子项未设height时起作用
容易被忽略的点：fr 单位不是 flex-grow，minmax() 才是关键
1fr 表示“剩余空间等分”，不是“按权重瓜分可用正空间”。当内容本身宽度超限时，1fr 列会被撑开，失去弹性效果。
真正对标 flex-shrink: 1 的写法是 minmax(0, 1fr)，它强制列最小可缩至 0，避免内容溢出破坏布局。响应式场景下，minmax(240px, 1fr) 比一堆 @media 更简洁，也更符合 Grid 的设计哲学。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
