minmax()是grid-template-columns中控制列弹性边界的核心手段，使列既能收缩至最小宽度又能扩张至最大宽度，避免硬编码或单纯fr导致失衡；fit-content()需嵌套于minmax(0, fit-content())才有效，用于内容驱动但上限可控的场景。
直接用 minmax() 或 fit-content() 就能解决大多数内容自适应场景，不需要 JavaScript 计算或媒体查询硬编码。
grid-template-columns 中用 minmax() 控制弹性范围
这是最常用也最可靠的自适应方式，尤其适合卡片、列表等有最小展示需求的内容。
-
minmax(200px, 1fr)表示：列宽至少 200px，最多占 1 份剩余空间；内容少时不会被压扁，内容多时可拉伸填满 - 搭配
repeat(auto-fit, ...)才真正动态 —— 容器变窄时自动换行，而不是缩小单列宽度 - 避免写成
minmax(200px, 200px)：这等于固定宽度，失去弹性；minmax(200px, max-content)则可能撑开整行 - 注意
1fr是“剩余空间均分”，不是“容器宽度均分”；如果前面有200px固定列，1fr只分剩下的部分
用 fit-content() 让某列紧贴内容但不溢出
适合侧边栏、标签栏、操作按钮组这类“内容决定宽度，但必须有上限”的场景。
-
fit-content(250px)意思是：取“内容实际需要宽度”和“250px”两者中较小值；文字短就窄，文字长就卡在 250px - 不能单独用在
grid-template-rows里控制行高（浏览器支持差），优先用于列 - 别和
1fr混用在同一轨道，比如fit-content(200px) 1fr可以，但fit-content(200px) 1fr fit-content(200px)在小屏下容易导致中间1fr被压缩到 0 - 可嵌套进
minmax()：例如minmax(120px, fit-content(200px))，确保最小也有 120px，又不超 200px
避免用 auto 或 max-content 直接设轨道尺寸
表面看简单，实际容易失控，尤其在响应式环境里。
-
grid-template-columns: auto auto看似随内容缩放，但一旦内容过长（比如长 URL、无空格字符串），整列会无限撑宽，破坏布局 -
max-content等价于“不换行时的总宽度”，对中文影响小，但英文长单词或代码片段会直接突破容器 -
auto在行方向（grid-template-rows）表现尚可，但在列方向极易引发横向滚动，除非你明确控制子项内文本折行（word-break: break-word） - 真要内容驱动宽度，优先选
fit-content()+ 显式上限，而不是裸用auto
真正难的不是怎么写，而是判断哪一列该“弹性”、哪一列该“收缩”、哪一列该“锁定”。比如主内容区用 1fr，操作栏用 fit-content(180px)，状态标签用 minmax(64px, max-content) —— 组合使用比单点技巧更重要。浏览器对 fit-content() 的支持已覆盖 Chrome/Firefox/Safari 15.4+，但 IE 完全不支持，这点容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
