repeat(auto-fit, minmax(250px, 1fr))比auto-fill更适合卡片布局，因为auto-fit会收缩空轨道使现有卡片均分整行空间，避免右侧留白或横向滚动；auto-fill则强制保留所有可能列轨道，导致内容少时出现空白列。
为什么repeat(auto-fit, minmax(250px, 1fr))比auto-fill更适合卡片布局
因为auto-fit会把空的轨道“收掉”，让剩余卡片自动拉伸占满整行；而auto-fill会保留所有生成的列轨道（哪怕没内容），导致右侧留白或卡片被压缩。实际做响应式卡片时，你几乎总是想要前者。
常见错误是直接套用却没设容器width或忘了重置gap外边距——浏览器默认grid-gap不继承，且父容器若没明确宽度（比如max-width: 1200px），在小屏下可能触发横向滚动。
- 必须给网格容器设置
width: 100%或max-width，否则minmax(250px, 1fr)里的1fr可能计算异常 -
gap建议用rem或em，避免在高DPI屏上显得过窄 - 别在卡片内部用
float或display: inline-block，会破坏grid子项的尺寸计算
250px这个最小值怎么选才不卡顿
250px不是魔法数字，它得匹配你卡片内容的最小可读宽度：文字不换行挤成一团、图片被压扁、按钮变不可点，都是因为设小了。但设太大又会导致中屏（比如iPad横屏）只排两列，浪费空间。
实测下来，纯图文卡片建议从280px起步；带表单控件（如输入框、下拉）的至少320px；如果卡片内有固定宽高比图片（比如aspect-ratio: 4/3），还要预留padding和border空间。
- 用
devtools调小窗口宽度，观察卡片何时开始“文字溢出”或“图标错位”，那个临界宽度就是你的下限 - 避免用
minmax(200px, 1fr)配font-size: 16px——200px减去左右padding+border后，文字只剩不到150px，阅读吃力 - 如果要兼容老设备，别依赖
1fr在IE中生效（它不支持），得另写@supports not (display: grid)降级方案
卡片高度不一致时，怎么避免网格“参差不齐”
默认情况下，每行卡片按该行最高项对齐，下面留白难看。这不是auto-fit的问题，而是grid-auto-rows没干预的结果。
最简单解法是加grid-auto-rows: 1fr，强制每行所有轨道等高；但要注意：这会让短卡片内部空白拉伸，如果里面是绝对定位元素，可能偏移。更稳的做法是用align-items: start + 卡片内height: 100% + 内容区min-height兜底。
- 别只靠
align-items: stretch（默认值），它对auto-fit生成的隐式行无效 - 如果卡片含异步加载内容（比如图片延迟渲染），先设
min-height防布局抖动 - 慎用
grid-row: span 2手动跨行——它会破坏auto-fit的自动列数推算，导致后续行错位
移动端真机测试最容易漏掉的三个细节
Safari iOS 15.4+ 和 Chrome Android 对minmax()解析基本一致，但仍有三处必须手敲代码验证：
- iOS Safari 下，
gap在zoom: 1.0以外缩放时可能失效，建议用padding模拟间隙 - 部分安卓WebView（尤其旧版Samsung Internet）不识别
1fr在minmax()里作为最大值，可加grid-template-columns: repeat(auto-fit, minmax(280px, 100%)))兜底 - 微信内置浏览器（X5内核）对
grid子项margin塌陷处理异常，统一用gap代替外边距
真正麻烦的从来不是写出这行CSS，而是当设计师说“在iPhone SE上看要刚好三列”时，你得意识到250px在320px宽屏幕上根本撑不满三列——这时候得切到@media (max-width: 375px)里改minmax(180px, 1fr)，而不是硬扛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
