grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 是最稳响应式卡片栅格写法，因 auto-fit 收缩空轨道并均分剩余空间，minmax 中 280px 保可读底线、1fr 实现弹性分配，配合 gap 和 flex 布局可实现等高贴底与防抖动。
用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 是唯一能稳定撑住列表卡片响应式布局的写法，其他方案在真实设备上大概率断裂——不是“看起来像”，而是“换行不抖、文字不压扁、小屏不横向滚动”。
为什么 auto-fit + minmax() 不可替代
这个组合不是让卡片“换行”，而是让浏览器实时计算：当前容器能塞几列，每列必须 ≥280px，超出部分均分（1fr）。它不依赖 JS、不靠媒体查询切断点、也不看内容长度。
-
minmax(280px, 1fr)中的280px是底线：iPhone SE 宽度下仍可读，低于它标题和描述就会折两行甚至挤成细条 -
auto-fit会收缩空轨道；auto-fill则保留空列占位——小屏下三张卡片硬塞进四列轨道，直接压窄文字 - 写死
repeat(3, 1fr)或repeat(4, 1fr)在手机上必然触发横向滚动，必须禁用 - IE11 不支持
auto-fit，但市占率已低于 0.03%，无需降级
gap 必须代替 margin 控制卡片间距
margin 加在卡片上会破坏 Grid 轨道计算逻辑：外边距合并、末尾多出间隙、动态插入时错位。而 gap 是 Grid 原生属性，只作用于网格项之间，干净且可预测。
- 用
gap: 1.5rem同时控制行距和列距，别再写.card { margin: 0.5rem }—— 实际间距会翻倍 - Safari 14.1+ 才完整支持
gap，旧版可用grid-column-gap/grid-row-gap替代（仅限必要兼容场景） - 避免用百分比或
em单位写gap，某些旧 Safari 渲染异常，统一用rem或px
卡片内部怎么做到等高 + 按钮贴底
Grid 只管列数和行对齐，单张卡片高度由内容决定。若不约束，短卡片底部悬空、长卡片把整行顶高、图片加载抖动还会导致等高失效。
立即学习“前端免费学习笔记（深入）”；
- 给
.card设display: flex; flex-direction: column; height: 100% - 主体区域（如描述文字）加
flex-grow: 1或flex: 1吸收剩余空间 - 底部按钮区域用
margin-top: auto贴底，禁用position: absolute（脱离文档流、Safari 高度算不准、影响可访问性） - 图片必须包一层
overflow: hidden容器，并设img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 16/9 }，否则加载抖动会触发重排
悬停动效卡顿的真实原因和解法
用 top、margin-top 或 left 做上浮，每次 hover 都触发 layout（重排），低端设备明显掉帧。真正流畅的动效只该走合成层。
- 正确写法：
.card:hover { transform: translateY(-4px); } - 必须显式声明
transition，例如：transition: transform 0.2s ease，否则部分 Chrome 版本有延迟 - 给
.card加min-height（如min-height: 180px），锚定 hover 前后基线，避免下方卡片“弹一下” - 慎用
box-shadow改变，改用filter: drop-shadow()更稳妥
最常被忽略的是图片没加 aspect-ratio 和 object-fit，以及卡片内用了 position: absolute——这两处一出问题，Grid 再稳也救不回视觉节奏。
