用 CSS Grid 实现响应式多栏卡片布局,核心是 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 配合 gap,让浏览器自动计算列数并确保手机端垂直单列排列,避免硬写媒体查询破坏流式逻辑。

用 CSS Grid 实现响应式多栏卡片布局
手机端自动垂直排列,核心不是“写个 media query 就完事”,而是从一开始就用 grid-template-columns 配合 minmax() + auto-fit,让浏览器自己算列数。硬写 @media (max-width: 768px) { grid-template-columns: 1fr; } 看似简单,但会破坏流式逻辑,且在中等屏幕(比如 iPad 横屏)容易卡在两列不动。
- 推荐写法:
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))—— 最小宽度 280px 是手机竖屏下卡片可读的合理下限,1fr让剩余空间均分 - 必须配
grid-gap(或gap),否则卡片紧贴边缘,移动端体验差 - 别给卡片设固定高度;用
min-height或靠内容撑开,否则在文字长度不一时会出现错位
为什么不用 float 或 inline-block 做多栏
float 在现代布局里已退场,inline-block 有空白字符间隙问题,且两者都缺乏真正的“自动换行控制”。你改一个卡片内容,整行就可能塌陷或错位,调试成本远高于直接上 display: grid。
-
float必须清浮动,inline-block要么注释掉 HTML 换行,要么用font-size: 0再重置子元素字体,维护性差 - 它们无法响应容器宽度动态调整列数,只能靠 JS 监听 resize —— 不必要且易出 bug
- 所有现代浏览器(包括 iOS Safari 12.2+)都支持
grid,无需前缀
卡片内图片和文字如何对齐才不崩
卡片内容不对齐是移动端最常见破相点,根源常在于图片没设 width: 100% 或文字容器没设 word-break: break-word。
- 图片必须加:
img { width: 100%; height: auto; display: block; },否则在某些安卓 WebView 里会溢出卡片 - 标题/描述文字用
word-break: break-word,避免长英文单词撑破卡片宽度 - 如果卡片有图标或头像,建议统一用
aspect-ratio: 1 / 1控制比例,比固定height更安全
兼容 iOS Safari 的几个实际坑
iOS 15.4 之前,gap 在 flex 容器里不生效,但 grid 容器没问题 —— 所以坚持用 display: grid 就绕开了这个老 bug。真正要留意的是 Safari 对 minmax(280px, 1fr) 的解析偶尔偏保守,尤其在 viewport 缩放后。
立即学习“前端免费学习笔记(深入)”;
- 加一行
grid-auto-rows: minmax(100px, auto),防止 Safari 把空卡片高度压到 0 - 避免在卡片内用
position: absolute叠加层,iOS Safari 的 stacking context 处理有时不一致 - 真机测试时记得关掉“智能缩放”,否则
viewportmeta 设置可能被覆盖



















