正确写法是grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)))，其中240px为iphone se安全下限，需据内容密度调整；必须用auto-fit而非auto-fill，禁用width与max-width混设，统一用gap控制间距，卡片内图片需约束宽高比，长文本用-webkit-box截断，卡片设align-self: start防底部悬空。
grid-template-columns: repeat(auto-fit, minmax()) 怎么写才不崩
直接抄 minmax(300px, 1fr) 很容易在 iPhone SE 或窄屏安卓上出问题：卡片被压扁、文字换行错乱、甚至触发横向滚动。关键不是“套公式”，而是根据内容密度选最小宽度。
240px 是安全下限（适配 iPhone SE 宽度），280px 更适合中文标题+图片组合，320px 适合带操作按钮的宽卡片。别硬套别人写的值，打开浏览器 DevTools 调整容器宽度，观察卡片内文字是否可读、图片是否变形，再反推最小值。
-
auto-fit必须用，它会收缩空轨道；auto-fill会保留空白列，小屏下直接把卡片挤窄 - 容器不能同时设
width: 100%和max-width，否则 Grid 在窄屏下可能算出负轨道宽度 - 如果卡片内有固定高图片（比如
height: 180px），必须加img { width: 100%; height: auto; }，否则撑破网格项
gap 和 margin 混用为什么总出问题
gap 是 Grid 原生间距控制，margin 是通用布局属性，混用会破坏轨道计算逻辑——尤其当卡片用 margin-bottom 时，Grid 会把 margin 当作内容高度参与行高分配，导致最后一行卡片悬空或错位。
- 统一用
gap: 1.5rem控制行列间距，干净且不触发外边距合并 - 旧教程里用
:not(:last-child)清除末项 margin，现在纯属冗余，gap已覆盖全部需求 - IE11 不支持
gap，可用grid-column-gap/grid-row-gap降级，但别为它妥协现代写法 - 慎用百分比或
em单位的gap，某些旧版 Safari 渲染异常，统一用rem或px
卡片内部内容失控的三个爆点
外层 Grid 再稳，也救不了卡片内部结构失控。真实设备上最容易露馅的是图片撑破、标题折行诡异、描述截断在中间。
- 图片必须包一层
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更可靠，且不依赖固定高度 - 禁用
position: absolute布局按钮或标签：它脱离文档流，Grid/Flex 高度算不准，Safari 下尤其容易错位
卡片高度不一致时为什么底部悬空
Grid 默认 align-items: stretch，会让所有卡片在行内拉伸对齐。短内容卡片被拉高，底部按钮或描述区域就悬空了——这不是 bug，是默认行为。
- 加
align-self: start到.card，让它顶部对齐、不拉伸 - 卡片本身别设死
height，靠display: flex; flex-direction: column; flex-grow: 1让内容区域吸满空间 - 如果用了
grid-auto-rows，hover 时高度变化会直接影响后续行位置，此时应改用显式grid-template-rows或放弃动态行高
repeat(auto-fit, minmax())，而是卡片内容高度不可控、图片未约束、阴影未降级——这些细节不处理，再“响应式”的布局也会在真实设备上露馅。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
