Flex的flex-direction和justify-content无直接Grid对应属性，需转为二维思维：如row+space-between按钮组应改用grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)))配合gap实现。
Flex的flex-direction和justify-content怎么对应Grid的grid-template-rows/columns
Flex是单轴布局，Grid是二维布局——直接“转换”不是替换属性，而是重新思考内容在二维空间中的定位。比如flex-direction: row + justify-content: space-between常用于水平均分按钮组，这在Grid里通常不靠justify-content实现，而用grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))配合gap更可控。
常见映射误区：
-
justify-content: center≠justify-items: center（后者只作用于单元格内内容，不是整个容器）→ 实际该用margin: 0 auto或place-content: center -
align-items: stretch在Flex中默认拉伸子项高度，在Grid中需显式设align-items: stretch（Grid默认值其实是stretch，但仅当子项没设height时生效） -
flex-wrap: wrap没有直接Grid等价物，得靠grid-auto-flow: row dense+ 列数控制，或改用auto-fit/auto-fill
Flex的order、flex-grow、flex-shrink在Grid里怎么替代
Grid没有“弹性增长/收缩”的概念，它的尺寸分配靠轨道定义（grid-template-columns）和fr单位模拟，顺序靠grid-row/grid-column显式定位。
实操建议：
-
order: 2→ 改为grid-row: 1; grid-column: 2，或统一用grid-area命名区域后调序 -
flex-grow: 1→ 用1fr，但注意：多个1fr列会等分可用空间；若原Flex中只有1个子项flex-grow: 1，其余为固定宽，则Grid应写成grid-template-columns: 100px 1fr 80px -
flex-shrink: 0→ Grid中对应min-width: 0（防内容溢出导致网格塌缩），再配合grid-template-columns用minmax(min-content, 1fr)更稳妥
为什么把display: flex改成display: grid后子元素错位了
最常见原因是：Flex子项的margin、width、flex-basis在Grid中不再参与主轴计算，且Grid默认box-sizing: border-box但Flex不强制——尤其当旧代码混用padding和width: 100%时，Grid下容易撑破容器。
排查步骤：
- 先移除所有子项的
width/max-width，让Grid按轨道分配空间 - 检查是否有
margin-left: auto这类Flex常用居右写法 → Grid中应改用margin-left: auto仍有效，但必须确保父容器是display: grid且该子项未被grid-column锁定位置 - Chrome DevTools里勾选“Show grid areas”看是否真按预期划分了网格线；若显示空白，大概率是
grid-template-rows/columns没定义或值为none
响应式重构时，用@container还是继续切@media写Grid
目前（2024年主流浏览器）@container对Grid布局支持有限：它能触发grid-template-columns变化，但无法动态重排grid-area或改变grid-row跨度。所以别指望靠容器查询自动把三栏Flex变成两行Grid。
更现实的做法：
- 移动优先：用
grid-template-columns: 1fr打底，中屏repeat(2, 1fr)，桌面repeat(3, 1fr)，靠gap统一控制间距 - 避免在媒体查询里重复写
grid-area——先用grid-template-areas定义语义区域（如"header header" "nav main" "footer footer"），再在不同断点里切换grid-template-areas值 - 如果旧Flex用了大量
flex: 0 0 33.333%做栅格，直接转成grid-column: span 1+grid-template-columns: repeat(3, 1fr)，比维护多套@media更轻量
真正容易被忽略的是：Grid的隐式网格（grid-auto-rows）在响应式中可能意外创建新行，尤其当子项数量动态变化时——务必显式设grid-auto-rows: minmax(0, max-content)防高度失控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
