移动端卡片 grid 布局适配核心是 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))，配合图片、标题、溢出控制及 x5 内核降级方案。
用 grid-template-columns: repeat(auto-fit, minmax()) 替代固定列数
移动端卡片不换行、被压缩变形，往往是因为写了死列数（比如 grid-template-columns: 1fr 1fr 1fr）或误用了 grid-auto-flow: column。真正适配小屏的关键不是猜断点，而是让 Grid 自己算能放几列。
核心写法是：grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))。其中：
-
280px是移动端单卡最小可读宽度（图片+文字不挤），低于此值会自动缩为一列 -
1fr表示剩余空间均分，确保所有列等宽且撑满容器 -
auto-fit会合并未填充的空轨道；别用auto-fill，它会留白列，导致小屏出现“看不见的空白列”
避免卡片内容撑破布局的三处约束
Grid 只管网格线，不管内部溢出。常见问题：图片拉伸、标题单行溢出、按钮跑出右边界——这些都不是 Grid 的锅，是卡片内元素没加限制。
必须加的控制项：
- 图片统一用
img { width: 100%; height: auto; display: block; }，禁用width: 100vw（会突破容器） - 长标题加
word-break: break-word或display: -webkit-box; -webkit-line-clamp: 2;截断 - 卡片整体设
overflow: hidden，防止子元素越界影响 Grid 轨道计算
安卓微信 X5 内核里 Grid 失效怎么办
老版微信内置浏览器（X5 内核）对 auto-fit 和 gap 基本不支持，display: grid 可能直接被忽略，整个布局坍塌。
兼容方案要主动降级，不能靠用户升级微信：
- 先用
@supports (display: grid)包裹 Grid 样式，否则旧内核会跳过整块规则 - 降级用 Flexbox：
display: flex; flex-wrap: wrap;+flex-basis: calc(50% - 8px)实现双列，再配合媒体查询切单列 -
gap改用margin模拟，但需额外处理首尾卡片的多余外边距（例如用:first-child和:last-child重置） - 跨列需求（如
grid-column: span 2）在 X5 中完全无效，这类设计得单独抽离或放弃
高度不一致时错行、底部不对齐怎么修
卡片内容长度不同，会导致 Grid 默认行为下出现“阶梯状”错位，尤其在 iOS Safari 或 Chrome 移动端容易明显。
两步解决：
- 加
grid-auto-rows: minmax(min-content, max-content)，让隐式行高随内容弹性伸缩，而非按首行高度截断 - 卡片内主内容区域用
display: flex; flex-direction: column;+flex: 1拉伸占满，按钮等固定元素用margin-top: auto推到底部 - 慎用
align-items: stretch（默认已生效），它只对显式定义的行起作用；对隐式行，还是得靠grid-auto-rows
真正麻烦的不是这几句 CSS，而是业务数据结构千差万别——比如某张卡片要横跨两列，但只在 iPad 上生效。这种需求没法靠一个 minmax() 解决，得结合 JS 动态加类或服务端条件渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
