minmax(auto, 1fr)中auto仅为最小下限，不阻止压缩；真正防缩需用minmax(0, 1fr)（需子元素设min-width: 0）或minmax(min-content, 1fr)，且grid-template-columns仅控显式列，隐式列由grid-auto-columns管理。
grid-template-columns里用minmax(auto, 1fr)为什么项还是被压缩了
因为minmax(auto, 1fr)的auto只是最小值下限，不阻止浏览器在空间紧张时把内容撑开再强制缩小——尤其当子元素有固有尺寸（比如图片、带width的块）或内部文本无法折行时，auto就失效了。
真正起保护作用的是minmax(min-content, 1fr)或minmax(0, 1fr)，它们分别对应“至少能放下最窄内容”和“允许缩到0”。但要注意：min-content对含英文单词的文本可能产生意外断行，0则可能导致项完全消失。
-
minmax(0, 1fr)适合纯弹性布局，但需确保子元素自身有min-width: 0（否则flex/grid项默认有min-width: auto，会卡住收缩） -
minmax(min-content, 1fr)适合文字为主、允许自然断词的场景 - 如果子元素是
<img alt="CSS如何控制网格项在空间不足时的收缩_理解minmax在grid中的保护机制" >或<iframe></iframe>，必须额外加max-width: 100%和height: auto，否则它会按原始尺寸撑破网格
grid-auto-columns和grid-template-columns的收缩行为差异
grid-auto-columns只影响**隐式网格轨道**（比如用grid-column: 1 / -1跨列超出定义范围时自动创建的列），而grid-template-columns控制的是显式定义的列。两者都支持minmax()，但实际收缩效果取决于项落在哪类轨道上。
常见错误：以为设了grid-auto-columns: minmax(0, 1fr)就能保所有项不溢出——其实只有那些“没被grid-column显式指定列号”的项才会走这条规则。显式列仍由grid-template-columns决定。
立即学习“前端免费学习笔记（深入）”；
- 显式列（
grid-template-columns）优先级高于隐式列（grid-auto-columns） - 如果用
repeat(auto-fit, minmax(200px, 1fr))，它生成的是显式列，不是靠grid-auto-columns兜底 -
grid-auto-columns常用于“动态追加项”的卡片流布局，但需配合grid-column: auto才能触发
浏览器对minmax(min, max)中min值的实际执行逻辑
浏览器不会无条件尊重min值。当所有轨道的min总和超过容器宽度时，它会先尝试按比例压缩各轨道的min，直到总和≤容器宽；若仍不满足，则忽略min，退回到内容自然尺寸（即min-content或fit-content行为）。
这意味着：写minmax(300px, 1fr)在300px宽容器里，最终可能得到一个100px宽的列——不是bug，是规范要求的降级策略。
- 查证方法：打开DevTools，在Computed面板看该网格项的
grid-column-end和实际width，对比是否等于min - 想强制守住
min？只能限制父容器足够宽，或改用clamp()配合min-width在子元素上双保险 -
minmax(0, 1fr)比minmax(1px, 1fr)更可靠，因为0不会触发上述压缩逻辑
子元素overflow: hidden为何有时仍挡不住网格项溢出
因为网格项的溢出由两层控制：一是项自身是否超出轨道（受minmax和grid-column约束），二是项内部内容是否溢出（受overflow控制）。很多人只设了overflow: hidden，却忘了项本身已被拉伸变形。
典型现象：文字没换行、图片没缩放、flex子项没设flex-shrink: 1，导致网格项被迫撑大，此时overflow: hidden对父网格容器无效——它只裁剪项的内容，不干预项的尺寸计算。
- 必须同时检查三层：网格容器的
grid-template-columns、网格项的min-width/max-width、项内元素的尺寸约束 - 快速验证：临时给网格项加
outline: 1px solid red，看是项本身溢出，还是内容溢出 - 对文字内容，
word-break: break-word或overflow-wrap: break-word比单纯overflow: hidden更治本
minmax()里的min根本不是“保证最小”，而是“尝试最小”——真要锁死，得靠容器宽度 + 子元素约束 + 显式min-width组合出手。 
