Grid 通过轨道定义（如fr单位）、对齐控制和自动尺寸行为实现动态空间分配，fr是轨道级比例分配机制，需配合minmax(0,1fr)避免内容撑开，auto-fit+minmax可响应式列数，其轨道级分配比Flexbox更鲁棒。
Grid 本身不提供 flex-grow/flex-shrink 那种基于内容的动态伸缩逻辑，但可以通过轨道定义 + 对齐控制 + 自动尺寸行为，逼近甚至超越 Flexbox 的空间分配效果——关键不是“模拟 Flexbox”，而是用 Grid 的方式解决同一类问题。
grid-template-columns/rows 中的 fr 单位就是 Grid 的“flex-grow”
当你写 grid-template-columns: 1fr 2fr 1fr，本质是把可用空间按比例切分，和 flex: 1 / flex: 2 效果一致，但机制不同：fr 是轨道级声明，不依赖子项内容或顺序。
-
1fr不等于flex: 1—— 后者还隐含flex-basis: 0，而1fr默认以minmax(auto, 1fr)行为参与计算，遇到长文本或固定宽元素时可能撑开轨道 - 要获得真正“从零开始均分”的效果，显式写成
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) -
fr不能和绝对单位（如px、rem）直接比大小；1fr 200px 1fr中的两个1fr共享剩余空间，不是总空间的 1/3
justify-content 和 justify-items 在 Grid 中的行为差异
justify-content 控制的是整个网格容器内所有轨道的对齐（即“网格线整体偏移”），而 justify-items 才控制每个网格项在其单元格内的主轴对齐——这和 Flexbox 的 justify-content（作用于项目）完全不同，初学者常在这里翻车。
- 想让某一行里的三个卡片水平等距分布？别用
justify-content: space-between，那会让整行轨道左对齐，留白在右侧；该用justify-items: stretch（默认）+ 子项设margin-inline: auto或用place-self - 单个网格项需要在单元格内右对齐：
justify-self: end，不是justify-content: end -
justify-items: center会让所有项在各自单元格中水平居中，但不会影响轨道宽度——它不分配空间，只调整位置
用 auto-fit + minmax 实现 Flexbox 式响应式列数
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 是 Grid 最接近 Flexbox “自动换行+等宽伸缩”能力的写法，但它不是靠项目自身 flex 属性驱动，而是由容器根据可用宽度和最小约束主动重算列数。
- 必须配合
gap使用，否则项之间没间距；Flexbox 的gap是后来加的，Grid 原生支持 -
auto-fit会折叠空轨道，auto-fill则保留空轨道占位——选错会导致小屏下出现不可见空白列 - 这个模式下，每个项宽度由
1fr动态分配，但高度仍由内容决定；若需等高，得额外加align-items: stretch（默认）
真正容易被忽略的点是：Grid 的空间分配始终以轨道为单位，哪怕你只放一个子项，它也受所在轨道的尺寸定义约束；而 Flexbox 的空间分配直接作用于项目本身。所以当需求里混着“固定宽侧边栏 + 自适应主内容 + 底部粘贴页脚”时，硬套 Flexbox 的 flex: 1 容易因父容器高度未定义而失效，但 Grid 的 grid-template-rows: auto 1fr auto 从轨道层面就锁死了“1fr 是剩余空间”这一事实——这才是它鲁棒的根本原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
