如何使用CSS Grid通过auto、fr、%等单位精确调整Grid元素尺寸？

本文共计1188个文字，预计阅读时间需要5分钟。

autoauto 不是 自动填充，而是 内容自然尺寸 + 可用空间剩余分配前的基准值。它会先根据子元素自身内容（例如文字宽度、图片固有宽度）确定最小尺寸，再考虑是否接受 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，参与剩余分配）。