正确写法是grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))，需配合卡片flex布局、统一用gap不用margin、图片加overflow隐藏与object-fit、hover前设min-height锚定基线。
直接用 display: grid + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 就能实现真正流式、无 JS、不依赖媒体查询的卡片布局，但必须同步约束卡片内部结构，否则小屏下图片撑破、文字换行错乱、hover 跳动等问题会立刻暴露。
grid-template-columns 怎么写才不崩
这行代码不是复制粘贴就完事的，关键在三个参数协同：
-
auto-fit必须用，它会让空列自动收缩；auto-fill会保留空轨道，小屏下容易把三张卡片硬塞进一屏，文字挤成两行还看不清 -
minmax(280px, 1fr)中的280px是最小列宽，不是随便写的：iPhone SE 屏宽 375px，减去左右 padding 和 gap 后，280px 是保证标题+一行描述可读的底线；内容极简可压到240px，但别上浮到320px，否则部分安卓小屏会触发横向滚动条 -
1fr表示“剩余空间均分”，不是固定像素——所以父容器别同时设width: 100%和max-width，窄屏下 Grid 可能算出负值或异常缩放
卡片内部为什么总塌、错位、图片撑破
Grid 控制列数和行对齐，但单张卡片高度由内容决定。常见症状是短卡片底部悬空、长卡片把整行顶高、图片突然把容器撑爆：
- 给
.card加display: flex; flex-direction: column; height: 100%，再让内容区（如.card__body）用flex-grow: 1吸满空间 - 图片必须包在
overflow: hidden容器里，且img标签设width: 100%; height: auto; object-fit: cover;——直接给img加border-radius会裁剪，不是圆角头像的正确解法 - 标题或描述过长？用
display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden;截两行，比text-overflow: ellipsis更稳，也不依赖固定高
gap 和 margin 混用为什么总出问题
gap 是 Grid 原生间距控制，margin 是通用属性，混用等于主动破坏 Grid 的轨道计算逻辑：
立即学习“前端免费学习笔记（深入）”；
-
gap: 1.5rem同时管行距和列距，干净、无外边距合并、不用:not(:last-child)清除末项 - 如果还在
.card上加margin: 1rem，实际间距会翻倍，而且不同断点下不可预测 - 旧 Safari（15.4 之前）不支持
gap在inline-grid上生效，务必确保容器是display: grid，别偷懒写成inline-grid
卡片 hover 效果导致布局跳动怎么办
最典型现象是鼠标移入后下方卡片“弹一下”，根源在于没预留空间或触发布局重排：
- 给卡片统一设
min-height: 180px锚定基线，避免高度浮动 - hover 动画优先用
transform和opacity，避免改height、margin或box-shadow；后者建议换成filter: drop-shadow()，更稳妥 - 如果用了
grid-auto-rows，hover 时高度变化会直接影响后续行位置，此时应改用显式grid-template-rows或放弃动态行高
真正难的从来不是写对那行 repeat(auto-fit, minmax())，而是每张卡片内部是否都禁用了 position: absolute、是否所有图片都套了 object-fit、是否每段文字都做了截断兜底——这些细节在桌面端看不出问题，一上真机就全露馅。
