fr单位本质是“剩余空间的份数”，仅分配减去固定值后的空间；混用时需用minmax()防撑宽，auto-fit+minmax()可实现响应式均分。
fr 单位的本质是“剩余空间的份数”，不是像素值
很多人误以为 1fr 就是“等分”，其实它只在所有列都用 fr 时才均分；一旦混入固定值（如 100px）或 auto，fr 就只分配剩下的空间。比如 grid-template-columns: 200px 1fr 2fr：先切掉 200px，剩下空间再按 1:2 分配。
- 所有列都用
fr（如1fr 1fr 1fr）→ 真正均分容器宽度 - 混用时，
fr不参与初始尺寸计算，只吃“减法后剩下的” -
minmax(0, 1fr)可防止内容撑宽导致不均分（尤其含长文本或图片时）
均分三列但需最小宽度限制怎么办
纯 1fr 1fr 1fr 在窄屏下会让列过窄甚至文字换行难读。这时要用 minmax() 配合 fr：
grid-template-columns: repeat(3, minmax(200px, 1fr)));
这表示：每列至少 200px，超出部分可弹性增长，且三列仍保持均分逻辑（因为上限都是 1fr）。
- 避免写
minmax(200px, 300px)→ 失去弹性，无法均分剩余空间 - 若某列内容极少，又想保持视觉平衡，可加
min-width: 0到子项，防止min-content撑开列宽 - 注意 Safari 对
minmax(0, 1fr)的旧版本兼容性，必要时用minmax(min-content, 1fr)
为什么设置了 1fr 1fr 1fr 还是不均分
常见原因不是 Grid 写错了，而是父容器没给宽度、子项有默认 margin/padding、或存在隐式尺寸干扰：
