CSS Grid的auto-fit+minmax()是移动端多列网格最优解，需配合强制单列断点、box-sizing: border-box和gap使用；column-count仅适用于纯文本流，不适用于卡片布局。
移动端多列网格布局不能靠 nth-child 算“第几列”，也不能指望 column-count 自动适配卡片类内容——它只适合纯文本流。真正稳定、可维护的方案是 CSS Grid 的 auto-fit + minmax()，辅以强制单列断点和 box-sizing: border-box 防错位。
为什么 column-count 不适合卡片列表
它把内容当流水线切分，不认语义、不保结构：column-count: 3 在手机上会硬挤出三列，每列只剩 100px 宽，卡片文字缩成一团；break-inside: avoid 只能防段落截断，对 div 卡片无效。更麻烦的是，你没法控制某张卡片跨列或对齐顶部——它天生为报纸排版设计，不是为 UI 组件服务的。
- 适用场景仅限于长文章、说明文档等纯文本流
- 卡片、按钮、表单控件等块级元素会错行、错高、错间距
- 移动端必须用
@media (max-width: 480px)强制设为column-count: 1，否则必出横向滚动
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 怎么写才不翻车
这行代码是当前最简、最稳的响应式列数控制逻辑，但漏掉几个细节就会在小屏或老设备上崩：
- 必须加
gap，别用子项margin：写.grid { gap: 16px; }，子项不设任何 margin - 所有参与布局的元素（含伪元素）必须统一
box-sizing: border-box，否则 padding/border 会让实际宽度超限 - 移动端 320px 屏宽下，若
minmax(300px, 1fr)还想塞两列，就会触发横向滚动——必须加断点：@media (max-width: 480px) { .grid { grid-template-columns: 1fr; } } - IE11 不支持
auto-fit，需回退：grid-template-columns: repeat(3, 1fr);+ 媒体查询降级
如何让每行卡片高度一致且不被内容撑开
卡片内容长短不一，直接放 Grid 会导致整行被拉高，视觉割裂。关键不是“设固定高”，而是“切断内容对高度的影响”：
立即学习“前端免费学习笔记（深入）”；
- 给卡片容器设
display: flex; flex-direction: column;，再让内容区flex: 1占满剩余空间 - 图片用
object-fit: cover; height: 0; padding-bottom: 100%;（配合父容器position: relative）实现正方形自适应，避免拉伸变形 - 标题/描述文字用
line-clamp截断（支持 Safari 16+），或 JS 控制行数，别靠height+overflow: hidden硬裁 - 绝对不要给卡片设
height: 300px——它会在小屏上溢出或留白，破坏流式逻辑
移动端 Safari 渲染中容易被忽略的坑
不是所有 Grid 行为在 iOS 上都“即刻生效”：
-
nth-child+grid-row组合在首屏有微小延迟，可能造成样式闪动，改用data-*类名锚点更稳 - 未设置
viewport的页面，Safari 会先按 980px 宽度渲染再重排，导致闪屏甚至错位 - 使用
gap时，旧版 Safari（-webkit-gap 前缀，否则间距消失 - Flex/Grid 混用时，
flex-wrap: wrap和grid-auto-flow: row逻辑冲突，同一容器别同时启用
真正难的不是写出能跑的代码，而是让不同尺寸、不同系统、不同内容长度下的卡片，始终对齐、等高、不溢出、不闪动。这些细节藏在 box-sizing、gap、viewport 和断点精度里，而不是在“用了 Grid”这个动作本身。
