Flex转Grid时，父容器必须显式设display: grid并定义grid-template-columns或grid-template-rows，否则网格无结构；子项居中需改用justify-self/align-self或place-items；fr与flex-grow逻辑不同，不可简单对应；justify-content与justify-items作用对象不同；响应式推荐auto-fit+minmax而非多段@media。
Flex布局转Grid时，哪些容器必须改display值
直接改display: flex为display: grid不行——Grid不继承Flex的主轴/交叉轴逻辑，子项的align-self、justify-self默认失效，且flex-grow/flex-shrink完全无效。
实操建议：
- 父容器必须显式设
display: grid，并至少定义grid-template-columns或grid-template-rows，否则网格无结构 - 原Flex中靠
margin: auto居中的子项，在Grid里要改用justify-self: center+align-self: center，或统一在容器上用place-items: center - 若原Flex用了
flex-wrap: wrap模拟多行，Grid中应改用grid-auto-flow: dense配合grid-auto-rows，而非强行塞进单行grid-template-columns
grid-template-columns里的fr单位和flex-grow数值怎么对应
fr不是比例缩放器，它是在剩余空间里按份数分配，而flex-grow是按权重瓜分“可用正空间”（即父容器宽 - 子项基础尺寸之和）；两者行为在子项有固定宽高时明显不同。
常见错误现象：把flex: 2 1 100px粗暴换成grid-column: span 2，结果列宽失控。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 纯等分场景（如三栏均分）：用
grid-template-columns: 1fr 1fr 1fr，比repeat(3, 1fr)更直观，也避免repeat()嵌套歧义 - 带固定尺寸混合（如
flex: 1+width: 200px）：写成grid-template-columns: 200px 1fr，Grid会先扣掉200px，再把剩余空间全给1fr - 注意
minmax(0, 1fr)——当内容超长导致1fr列被撑开时，加这个能强制截断，类似flex-shrink: 1的效果
justify-content和justify-items在Grid里为什么经常混淆
这两个属性作用对象不同：justify-content对齐的是整个网格轨道（即所有列组成的整体），justify-items对齐的是每个网格项在其所在单元格内的内联轴位置。Flex里只有一个justify-content管全部，Grid拆开了。
使用场景举例：顶部导航栏需要菜单项左对齐、右侧登录按钮右对齐——Flex靠margin-left: auto实现，Grid得用justify-self: end单独控制那个按钮。
实操建议：
- 全局水平对齐（如整行居中）：用
justify-content: center - 单个子项独立对齐（如某个按钮靠右）：用
justify-self: end，别试图用justify-items统一设再覆盖 -
justify-items设stretch（默认）时，子项会拉满单元格宽度，但若子项本身有width，则以width为准，stretch不生效
Grid替代Flex后，响应式断点代码反而变多？
不是Grid天生冗余，而是很多人把@media写在容器上重复定义整套grid-template，而Flex常用flex-direction: column一行切换，看起来更省事。
性能影响：每次媒体查询重定义grid-template-areas或grid-template-columns，浏览器需重新计算网格线，比Flex的轴向切换开销略大。
实操建议：
- 优先用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))替代多段@media，它能自动适配容器宽度，且只声明一次 - 真需复杂布局切换（如桌面三栏→平板两栏→手机一栏），用
grid-template-areas配合@media，比反复改grid-column更易维护 - 避免在子项上写
@media去调grid-column，会导致样式分散，难追踪布局流向
真正难的不是语法转换，是把原来靠Flex“流动感”掩盖的隐式尺寸依赖，暴露成Grid里必须明确定义的轨道和区域——没想清楚内容区块的语义边界，Grid只会让代码更难懂。
