用 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 设置可能被覆盖
