minmax()定义列宽范围而非仅设最小值，需配合fr或auto-fit等机制实现弹性；单独px/%无法兼顾最小与弹性，错误写法如200px 1fr会导致无下限压缩，正确应为minmax(200px, 1fr)。
用 minmax() 设置列的最小宽度
直接写 px 或 % 只能固定宽度，无法兼顾“最小 + 弹性”；真正控制最小宽度，必须用 minmax(min, max)。它不是让列“至少显示 min”，而是定义该列轨道的尺寸范围：浏览器会先按 min 分配空间，再在剩余空间允许时往 max 扩展。
常见错误是写成 200px 1fr，这会让第二列无下限——容器窄时可能被压缩到文字撑不开的程度。正确做法是把弹性部分换成 minmax(200px, 1fr)：
grid-template-columns: 240px minmax(200px, 1fr) 150px;
-
240px和150px是严格固定的两列 - 中间列最小 200px，容器变宽时可无限伸展占满剩余空间
- 如果容器总宽小于
240px + 200px + 150px = 590px，中间列仍会保持 200px，左右列可能溢出或触发滚动（取决于overflow）
repeat(auto-fit) 配合 minmax() 实现响应式最小列宽
商品列表、卡片网格这类场景，不需要预设列数，而是希望“每列至少 250px，多出来的空间自动加列”。这时别硬写 repeat(5, 250px)，要用 repeat(auto-fit, minmax(250px, 1fr)))：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)));
-
auto-fit会让浏览器尽可能多地铺开列，填不满时拉伸已有列 -
auto-fill则会保留空轨道（哪怕看不见），适合需要对齐的布局 - 注意：
minmax(250px, 1fr)中的1fr是上限，不是比例——它表示“最多占满当前行剩余空间”，不是和其它列比份额
fr 单位与最小宽度的冲突点
fr 本身不带最小限制，它的实际宽度受内容最小内联尺寸（比如长单词、图片）影响。即使写了 1fr，列也可能被撑宽，导致布局错乱。
- 解决方法之一是给网格项加
min-width: 0，强制允许收缩 - 更稳妥的是用
minmax(min-content, 1fr)替代纯1fr，但min-content行为不稳定，建议优先用像素值 - 若列里有图片，记得同时设
img { max-width: 100%; height: auto; }，否则图片会突破最小宽度约束
不要用 auto 或隐式行为保最小宽度
grid-template-columns: 200px auto 150px 看似简单，但 auto 会让中间列完全由内容决定宽度，失去“最小”控制能力。它等价于 minmax(min-content, max-content)，既不响应式，也不可控。
- 想让中间列“至少 200px，最多自适应”，必须显式写
minmax(200px, 1fr) - 想让它“至少 200px，最多 600px”，就写
minmax(200px, 600px) - 所有依赖内容撑开的行为（如
auto、fit-content()）都应视为例外，而非最小宽度方案
最小宽度不是靠内容“撑出来”的，而是靠 minmax() 主动声明的轨道约束。混用 fr 和像素时，要时刻意识到：浏览器先扣死固定部分，再分剩余空间——这个顺序决定了最小宽度能否真正生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
