auto-fit配合minmax()是实现响应式Grid布局最简洁高效的方式——每列最小250px、最大均分空间，屏幕缩小时自动减少列数并撑满容器，无需媒体查询或JS。
Grid网格布局中，用 auto-fit 配合 minmax() 是让栅格自动适配屏幕宽度最简洁高效的方式——它能根据容器宽度动态调整列数，不写断点、不依赖JS，一行CSS就能实现“多列→单列”的平滑响应。
用 auto-fit 替代 auto-fill 实现“收缩即适配”
auto-fit 会把空余的重复轨道合并（即“收掉”），让剩余列自动拉宽填满容器；而 auto-fill 保留所有可能的轨道（哪怕为空），容易导致列过窄或换行异常。
- 推荐写法：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) - 含义：每列最小250px，最大均分剩余空间；屏幕缩小时，列数自动减少，剩余列撑满整行
- 对比效果：在1200px宽容器里，该写法可能显示4列；缩到800px时自动变成3列；再缩到500px就只剩2列——完全由浏览器计算，无需媒体查询
结合 minmax() 设定合理弹性范围
只写 auto-fit 不够，关键在 minmax() 的两个参数——下限保内容可读，上限保布局不碎。
- 下限建议设为240–320px（兼顾小屏卡片内容和触摸操作空间）
- 上限用
1fr最自然：所有列等宽伸缩；也可用max-content或固定值（如400px）限制单列最大宽度 - 错误示例：
minmax(100px, 2fr)——2fr在多列时会引发比例冲突，应统一用1fr
加一句 gap 让间距也响应式
栅格列数变化时，如果间隙固定（如 gap: 20px），小屏下可能显得拥挤。可配合 clamp() 让间隙也弹性：
-
gap: clamp(0.5rem, 2vw, 1.5rem)—— 小屏间隙收紧，大屏适度宽松 - 或更简单：
gap: 1rem已足够多数场景；避免用px值过大（如30px），小屏易溢出
注意容器必须有明确宽度（通常靠父级约束）
auto-fit 依赖网格容器的可用宽度计算列数，如果容器本身没设宽（比如 display: grid 直接放在 <body> 且无其他限制），可能表现异常。
- 常见做法：给网格容器加
width: 100%或max-width: 1200px+margin: 0 auto - 移动端友好写法：
width: 100%; padding: 0 1rem;，再配合上面的minmax()，左右留白+内容自适应两不误
基本上就这些。不用算断点、不操心设备尺寸，auto-fit + minmax() 这一对组合，把响应式栅格变成了“设定规则，交给浏览器”的事情。
