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 不限制内容本身，只分“减去所有固定/最小尺寸后的空余”。它不管内容会不会撑破。
立即学习“前端免费学习笔记（深入）”；
- 搭配
minmax(0, 1fr)才能真正均分且防溢出（0允许压缩内容） -
2fr 1fr和60% 30%行为完全不同：后者基于容器总宽静态计算，前者依赖剩余空间动态重算 - 嵌套 Grid 中，外层
fr分的是外层可用空间，内层fr分的是内层容器的可用空间，不联动
百分比（%）在 Grid 中的参照对象很具体
% 在 grid-template-columns 或 grid-template-rows 里，参照的是**网格容器的内联尺寸（inline size）**：横向布局下，% 相对于容器 width；纵向布局（writing-mode: vertical-rl）下则相对于 height。但它**不参照父容器，也不参照内容，更不参照其他轨道**。
问题常出在：给 grid-column-start / grid-column-end 写 span 50% ——这是非法语法，span 后只能跟整数或 auto，% 在这里直接报错。
- 仅
grid-template-*和grid-gap（现为gap）支持% -
%值会参与初始轨道大小计算，但一旦内容撑开容器，它不会重新缩放（不像fr会响应剩余空间变化） - 和
px混用时，%是最后才计算的：例如200px 50%，先扣掉 200px，再把剩下空间的 50% 给第二列
实际调节尺寸时，优先级和冲突处理规则
Grid 尺寸不是靠单一单位决定的，而是 track sizing algorithm 按固定顺序跑多轮：先满足 minmax(min, max) 的上下限，再处理 auto 和 fit-content()，最后才分 fr。百分比在第一轮就转成绝对值参与计算。
最容易被忽略的一点：**grid-auto-columns 和 grid-auto-rows 只影响隐式网格线生成的轨道（即内容超出显式定义范围时自动创建的行/列），对显式定义的 grid-template-* 完全无效**。调了半天没反应，很可能改错了属性。
- 显式轨道用
grid-template-columns，隐式轨道用grid-auto-columns - 当某列同时被
grid-template-columns和grid-auto-columns影响（比如部分显式、部分隐式），以显式定义为准 - 浏览器 DevTools 的 Layout 面板里，“Grid” overlay 显示的是最终生效的轨道尺寸，不是你写的原始值——建议打开它对照验证
