fr单位是剩余空间的分配份额，需容器有明确宽度才生效；推荐用minmax()配合auto-fit实现响应式分栏，避免隐式轨道陷阱及flex混用时的min-width问题。
grid-template-columns 用 fr 单位实现真正流式分栏
fr 单位不是“固定比例”，而是剩余可用空间的分配份额。它只在容器有明确宽度（比如 width、max-width 或受父容器约束）时才生效；如果容器本身宽度不定（如 display: inline-grid 或未设宽的 div），fr 会退化为 min-content，导致列宽异常收缩。
常见误用是写成：
grid-template-columns: 1fr 2fr;却忘了给容器加
width: 100% 或放在弹性/块级上下文中。更稳妥的做法是配合 minmax()：
-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))—— 在 ≥300px 宽度下尽可能多列，每列至少 300px，多余空间均分 - 避免纯
1fr 1fr 1fr，除非你确定容器宽度始终可控 - 响应式中优先用
repeat(auto-fit / auto-fill, ...)而非媒体查询硬切列数
gap 和 justify-items 对齐行为容易混淆
gap 只控制网格项之间的空隙，不包括外边距；而 justify-items 控制的是每个网格项内容在其单元格内的对齐方式（类似 text-align），不是整行的对齐。很多人想让所有列左对齐、内容居中，结果写了 justify-items: center，却发现文字挤在单元格中央、列间距却没变。
- 控制整行水平对齐用
justify-content（作用于整个网格容器） - 控制单个网格项内容对齐用
justify-items或针对某一项用justify-self -
gap: 1rem不会撑开容器，但会参与盒模型计算——若容器有padding，视觉间距 =padding + gap
grid-column-start/end 配合 span 实现跨栏时的隐式轨道陷阱
当使用 grid-column: 2 / span 2 时，Grid 会自动创建隐式列轨道（implicit grid track），但这些轨道默认宽度为 auto，可能造成右侧空白或错位。尤其在流式场景下，隐式轨道不会自动继承 fr 行为。
立即学习“前端免费学习笔记（深入）”；
- 显式定义隐式轨道：用
grid-auto-columns: 1fr让新列也按比例分配 - 避免依赖隐式轨道做关键布局，跨栏尽量在显式定义的列范围内完成
- 调试时可临时加
outline: 1px solid red到grid-item，看清实际占据范围
与 flex 布局混用时的常见断裂点
Grid 是二维布局系统，Flex 是一维。把 display: grid 容器内部的某个子项再设为 display: flex 没问题；但反过来，在 display: flex 容器里嵌套 display: grid 子项，就容易忽略 flex 项的 min-width: auto 默认行为——这会让 Grid 子项无法收缩，撑破容器。
- 修复方法：给该 Grid 子项加
min-width: 0 - 不要在同一个容器上同时设
display: grid和flex-wrap，后者无效 - 流式分栏优先用 Grid，仅在单行内需复杂对齐时，才在 Grid 项内部启用 Flex
fr 单位和 auto-fit 组合看似简单，实际依赖容器尺寸上下文；一旦嵌套层级变深或与第三方组件共存，隐式轨道和最小尺寸限制就会突然暴露出来。
