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、或存在隐式尺寸干扰：
立即学习“前端免费学习笔记（深入）”；
- 父容器未设
width或被其他布局（如 float、inline-block）影响流式行为 - Grid 子项用了
display: inline或带white-space: nowrap但内容超长，触发了min-content计算优先级 - 忘了重置子项的默认
margin（如h3、p标签自带外边距） - 使用了
grid-auto-fit但容器宽度不够容纳三列最小宽度，导致实际只显示一列
响应式均分列宽：从 3 列退到 1 列怎么写
别重复写多套 grid-template-columns，用 repeat(auto-fit, minmax(...)) 更简洁：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))));
这句的意思是：“尽可能多地放宽度 ≥300px 的列，每列上限为 1fr（即均分剩余空间）”。屏幕缩小时，列会自动换行堆叠，无需媒体查询。
-
auto-fit会折叠空轨道，auto-fill则保留空轨道占位 - 搭配
gap使用时，minmax()的最小值要大于gap，否则可能触发异常换行 - 如果需要严格控制最大列数（比如最多 4 列），得配合
@media手动限制repeat(4, 1fr)
overflow: hidden，都会间接破坏你预期的“均分”视觉效果。 
