应使用repeat(auto-fit, minmax(300px, 1fr))实现响应式卡片网格，其中auto-fit收缩空轨道确保列数随容器宽度动态增减，minmax()限定每列最小300px且弹性分配剩余空间，需配合gap及图片比例控制等细节优化。
直接用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) 就能实现列数随屏幕宽度自动增减，无需媒体查询、不写断点、不改 HTML 结构——但前提是容器有明确宽度，且图片本身不能强制固定宽高破坏比例。
为什么 minmax(300px, 1fr) 不能写成 minmax(300px, 1fr)？
看起来一模一样？错。关键在第二个参数：如果写成 minmax(300px, 1fr)，浏览器会把“1fr”理解为“均分整行剩余空间”，每列都按同一套 1fr 基准拉伸，结果是小屏下仍试图塞多列，导致内容挤压或换行错乱。
真正起作用的是 minmax(300px, 1fr) 中的 1fr ——它在这里不是“等分单位”，而是“弹性上限占位符”，配合 auto-fit 才会让浏览器丢弃无法容纳整列的空间，只保留能放下 ≥300px 的列数。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 画廊在中等宽度下只显示 1 列，明明空间够却没自动变 2 列
- 图片高度不一致，出现纵向错位
- 小屏下图片被横向压缩变形
auto-fit 和 auto-fill 怎么选？
auto-fit 会折叠空轨道，让剩余空间由已渲染列平分；auto-fill 则保留所有轨道（哪怕没内容），容易引发水平滚动或空白间隙。
实操建议：
- 画廊类布局一律用
auto-fit，避免意外滚动条 - 若需预占位（如后台动态加载占位图），才考虑
auto-fill - 两者对子元素数量无要求，但
auto-fit在子项少于轨道数时更稳定
图片不变形的关键控制点
Grid 只管列数和间距，图片自身比例得靠另外两层控制：
- 容器设
aspect-ratio: 4/3或padding-top: 75%配合position: relative，锁定画布比例 - 图片用
object-fit: cover+width: 100%; height: 100%，强制裁切填充 - 禁用
img { width: 100%; height: auto }这类老式写法，它会破坏 Grid 轨道计算
没有 aspect-ratio 支持的旧浏览器（如 Safari 15.4 以下）需回退到 padding-top 方案，并用 @supports (aspect-ratio: 1/1) 包裹新写法。
小屏体验优化不能只靠 minmax()
minmax(300px, 1fr) 在手机上可能只剩 1 列，但此时 gap 和字体大小若没调整，会显得稀疏空洞。
必须搭配媒体查询微调辅助属性：
@media (max-width: 480px) { .gallery { gap: 6px; } }@media (max-width: 480px) { .gallery-item p { font-size: 14px; } }- 慎用
clamp()直接缩放gap，部分安卓 WebView 对clamp()解析不稳定
真正容易被忽略的是：父容器必须有明确宽度上下文。如果画廊嵌在 display: inline-block 或未设 width 的浮动元素里，minmax() 会失效——Grid 没法算“可用宽度”。
