真正精确控制网格比例必须用minmax()设最小宽度，如minmax(200px,1fr)；repeat(auto-fit,minmax(250px,1fr))实现响应式列数；混合单位需全部显式约束，内容需额外限制防溢出。
用 minmax() 替代裸 1fr 才算真正“精确”
很多人以为写 1fr 2fr 就能精确控制比例，但实际它只分配「剩余空间」，不保最小宽度。当内容窄、容器小，列可能被压缩到文字换行或图片溢出——这不是比例失控，而是缺少底线约束。
真正可控的比例，必须带下限：
-
minmax(200px, 1fr)：该列至少 200px，富余时按 1 份伸展 -
minmax(200px, 2fr)：至少 200px，富余时占 2 份（注意：不是“两倍宽”，是份额为 2） - 多个
minmax()并列时，浏览器先满足所有min，再按max的 fr 总和分剩余空间
repeat(auto-fit) 是响应式列数的唯一可靠方案
硬写 repeat(4, 1fr) 或 1fr 1fr 1fr 1fr 在小屏上会把每列压成 80px，图标和文字全糊。而 repeat(auto-fit, minmax(250px, 1fr)) 的行为是：
- 计算容器宽度 ÷ 250px，向下取整得“最多能放几列”
- 若能放 3 列，就建 3 条轨道，每条都是
minmax(250px, 1fr)，然后均分剩余空间 - 若只能放 1 列，那它独占 100% 宽度，仍不低于 250px
-
auto-fill会保留空轨道位置，导致列间巨大空白，别用
混合单位时，fr 和像素/百分比不能直接并列
写 200px 1fr 150px 看似合理，但第二列没有最小约束——容器缩到 400px 时，它只剩 0px 可用，实际会被内容撑开或触发滚动。
正确写法必须显式包裹：
- 固定 + 有底线弹性：
200px minmax(300px, 1fr) 150px - 固定 + 上限封顶：
200px minmax(300px, 600px) 150px - 避免
auto：200px auto 150px等价于minmax(min-content, max-content)，完全不可控
图片和长文本会破坏列宽预期，必须额外约束
即使列定义用了 minmax(250px, 1fr)，如果里面放一张没限制的 <img>，它仍可能突破 250px 把整行列拉宽；一个超长无空格单词也会撑开列。
补救措施要加在网格项（grid item）上，不是容器：
img { max-width: 100%; height: auto; }-
grid-item { min-width: 0; }（允许内容收缩，尤其对 flex/grid 子项有效） - 长文本加
word-break: break-word;或overflow-wrap: break-word;
minmax() 来划。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
