minmax(200px, 1fr) 单独使用不触发最小值，因Grid默认撑满容器；需配合repeat(auto-fit, minmax(200px, 1fr))才能在空间不足时收缩至200px，auto-fit丢弃空轨道，auto-fill保留。
minmax() 里用 minmax(200px, 1fr) 为什么网格项不收缩到 200px？
因为 minmax() 只在“可用空间不足”时才触发最小值约束，而 Grid 默认会优先撑满容器。真正起作用的是配合 auto-fit 或 auto-fill 的重复轨道定义，比如 repeat(auto-fit, minmax(200px, 1fr))) —— 这时 Grid 才会在空间紧张时把每列压缩到 200px，而不是强行拉伸。
常见错误是只写 minmax(200px, 1fr) 却没套进 repeat()，或者误用 auto-fill（它会预留空列，auto-fit 才会合并空轨道）。
-
auto-fit：丢弃空的轨道，剩余列等比拉伸填满容器 -
auto-fill：保留所有生成的轨道（哪怕没内容），可能导致右侧留白或滚动 - 浏览器兼容性没问题，Chrome/Firefox/Safari/Edge 均支持（包括 iOS Safari 10.3+）
如何让 Grid 在小屏下自动从 4 列变 2 列再变 1 列？
不需要媒体查询，靠 repeat(auto-fit, minmax(250px, 1fr))) 就够了。当容器宽度小于 250px × 2 时，Grid 引擎会自动减少列数；窄到不够一列最小宽时，就退化为单列。
关键点在于设定合理的最小值：太小（如 100px）会导致小屏仍挤出多列，太大（如 350px）则大屏也只显示一列。
- 最小值建议设为内容可读的宽度（文字、图片、按钮能正常显示）
- 避免用
em或rem做minmax()的最小值，因字体缩放可能破坏布局稳定性 - 若需更精细控制（比如 768px 下固定 2 列），再叠加媒体查询覆盖即可，但多数场景纯
auto-fit + minmax已足够
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))) 中的 1fr 是怎么分配的？
1fr 不是固定比例，而是“剩余自由空间均分”。当所有列都达到最小宽度后，多余空间才按 fr 单位分配。例如容器宽 900px，最小列宽 200px，最多容纳 4 列（4×200=800），剩下 100px 就四等分，每列变成 200px + 25px。
如果某列内容特别长（比如超长文本），默认会撑开整列，破坏等宽——这时要加 min-width: 0 或 overflow: hidden 给子元素，防止隐式最小尺寸干扰 minmax 行为。
-
1fr和flex: 1类似，但 Grid 是基于轨道而非内容计算 - 多个
fr值（如1fr 2fr）仍适用，但和auto-fit混用时意义不大，因列数动态变化 - 不要在
minmax()外层再套1fr，比如1fr minmax(...)，这会让第一列独占所有自由空间
为什么加了 auto-fit 后项目高度不一致，出现错位？
这是 Grid 默认的 align-items: stretch 在起作用——所有项目会拉伸填满行高。但当某项目内容少、高度天然小，stretch 会让它视觉上“被拉薄”，和其他项目对不齐。
解决方法不是改 Grid，而是控制项目自身行为：
- 给直接子元素加
align-self: start，让它顶部对齐且不拉伸 - 或全局设
align-items: start在容器上，所有项目统一顶部对齐 - 若需等高但又怕文字溢出，给内容区加
min-height: 0配合display: flex; flex-direction: column控制内部伸缩
容易忽略的是：Grid 行高由该行最高项目决定，auto-fit 不影响行高计算逻辑，只影响列数。错位本质是垂直对齐策略问题，不是响应式逻辑失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
