auto 是内容自然尺寸加剩余空间分配基准值，非简单撑满；fr 按剩余空间份数分配，非固定比例；% 参照容器内联尺寸且不重算；显式轨道用 grid-template-，隐式用 grid-auto-。
Grid 中 auto 到底怎么算尺寸
auto 不是“自动撑满”，而是“内容自然尺寸 + 可用空间剩余分配前的基准值”。它会先按子元素自身内容（比如文字宽度、图片固有宽高）确定最小尺寸，再看是否受 minmax() 或 grid-template-columns/rows 中其他轨道约束。
常见误判：设了 grid-template-columns: auto 1fr，结果第一列比文字还宽——其实是该列被同行其他轨道挤压后，auto 被强制拉伸（Grid 的 track sizing algorithm 会把 auto 当作 min-content 起步，但允许增长以填满剩余空间）。
- 想严格按内容宽：加
min-width: 0或overflow: hidden阻断隐式拉伸 - 和
fit-content(200px)搭配更可控：内容不超过 200px 时随内容，超了就截断 - 注意
auto在行方向生效，在列方向若父容器无明确宽度，可能退化为 100%
fr 单位不是比例，而是“剩余空间的份数”
1fr ≠ “占容器 1/3 宽”，而是“拿到当前所有剩余自由空间的 1 份”。如果轨道定义是 1fr 2fr minmax(200px, 1fr)，实际计算分三步：先满足 minmax() 下限 200px，再把剩下空间按 1:2:1 分（因为第三个轨道上限是 1fr，参与剩余分配）。
典型陷阱：写 grid-template-columns: 1fr 1fr 1fr，但某列内容很长导致整体换行或溢出——因为 fr 不限制内容本身，只分“减去所有固定/最小尺寸后的空余”。它不管内容会不会撑破。
立即学习“前端免费学习笔记（深入）”；
