minmax()定义单列可伸缩区间而非全局填满，浏览器先按所有列min值铺开，再按max−min余量比例同步增长并逐个封顶；容器宽须≥总min才触发弹性分配，否则溢出。
minmax() 不是“尽量填满”，而是有严格边界约束
很多人以为 minmax(200px, 1fr) 表示“至少 200px，多余空间按比例分”，但实际行为更刚性：它定义的是单列的**可伸缩区间**，不是全局分配策略。浏览器先确保所有列满足各自的 min，再把剩余空间按各列“还能长多少”（即 max − min）的比例去分——而且这个过程是同步增长、逐个封顶的，不是一次性算完。
常见错误现象：grid-template-columns: minmax(300px, 1fr) minmax(200px, 1fr) 在窄容器（比如 400px）下会溢出，因为总最小宽度是 500px，根本不够放。此时不会“压缩到小于 min”，而是直接水平滚动或裁剪。
- 真正能触发弹性分配的容器宽度必须 ≥ 所有
min之和 - 当某列先触达自己的
max，它就“锁死”，不再参与后续增长分配 -
1fr在minmax()里不是“无限大”，而是当前上下文可用空间的上限参考值（常被解析为容器宽度减去其他固定尺寸）
用 repeat(auto-fit, minmax()) 实现响应式内容优先布局
这是最贴近“内容优先”意图的写法，尤其适合卡片列表、侧边栏+主内容等场景。核心在于让列数随容器动态变化，而不是硬编码列数。
例如：grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
-
auto-fit会让空轨道塌陷，剩余空间均分给已填充的列；auto-fill则保留空轨道，导致列被“撑开” - 250px 是每列最小宽度（由内容决定），
1fr是该列最大能占的份额（不是绝对值，而是参与剩余空间分配的权重） - 当容器宽 600px 时，最多放两列（2×250=500 ≤ 600），第三列放不下，
auto-fit就只渲染两列，每列得 300px；若用auto-fill，则强行三列，每列约 200px（低于 min），触发溢出
避免用 fr 单位直接混入 minmax() 的陷阱
minmax(200px, 2fr) 看似合理，但 2fr 的含义依赖于同行其他 fr 值总和，而 minmax() 内部的 fr 并不参与外部 fr 总和计算——这会导致不可预测的拉伸行为，尤其在多列混合使用 fr 和 minmax() 时。
正确做法是统一尺度：
- 要么全用
minmax(min, max)，其中max写成具体长度（如400px）或1fr（仅当该行无其他fr项时） - 要么放弃
minmax()，改用grid-template-columns: 200px 1fr+min-width控制项目自身宽度，让内容决定列是否换行 - 不要写
minmax(100px, 2fr)和minmax(150px, 1fr)并列——它们的fr不互通，第二列不会因为第一列用了 2fr 就自动变窄
内容优先的本质是让内容尺寸驱动 min，而不是靠 CSS 猜
所谓“内容优先”，不是靠某个神奇函数自动适配，而是把内容的真实尺寸（文字行长、图片宽、按钮最小宽度）作为 minmax() 的 min 值，并预留合理上限。比如一个带图标+文字的导航项，实测最小需 120px，那就设 minmax(120px, 200px)；若内容是响应式图片，min 应设为图片的 min-width，而非拍脑袋的 150px。
容易被忽略的一点：CSS Grid 的列宽分配发生在 layout 阶段，它看不到 JavaScript 动态插入的内容尺寸。如果内容是异步加载或 JS 生成的，务必提前设置合理的 min，否则初始渲染会塌缩或溢出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
