直接用 repeat(auto-fit, minmax(280px, 1fr)) 实现自适应列数，auto-fit 收缩多余空间避免窄列，auto-fill 会强行铺满导致空列；gap 比 margin 更可靠，但 safari 旧版需加前缀，且无法实现首行顶/末行底无间距。
grid-template-columns: repeat(auto-fit, minmax()) 怎么写才对
直接用 repeat(auto-fit, minmax(280px, 1fr)) 就能实现列数随屏幕缩放自动增减，不用写一堆 @media。关键不是“填满”，而是“够宽才显示”——auto-fit 会把塞不下完整一列的空间收掉，避免出现被压扁的窄列；auto-fill 则会强行铺满，导致小屏下多出空列甚至横向滚动。
常见错误包括：
• 把最小值设太小（比如 minmax(150px, 1fr)），中等宽度下意外多出一列，文字换行错乱
• 写成 minmax(280px, 280px) 或 minmax(280px, 320px)，第二参数不是 1fr 就失去弹性
• 忘记移除 grid-auto-flow: column，它会让 Grid 改为列优先填充，直接破坏换行逻辑
gap 和 margin 哪个更适合控制卡片间距
gap 是 Grid 原生方案，比 margin 更干净可靠。它只作用于网格项之间，不会影响容器外边距，也不需要处理首尾元素的负边距或伪类选择器。
但要注意：
• Safari 旧版本（iOS 16.4 以下）需加 -webkit-gap 前缀
• gap 无法实现“第一行顶部无间距、最后一行底部无间距”这种设计——那说明你该换 Flexbox 或 JS 计算，别硬套 Grid
• 如果父容器有 padding，实际可用宽度变小，可微调为 minmax(280px, calc(1fr - 16px))（假设 gap: 16px）
卡片内容高度不一致时怎么对齐
Grid 默认 align-items: stretch，但卡片内若有未约束的图片、绝对定位元素或 flex 子项，会导致高度塌陷或错位，视觉上变成“阶梯状”。
解决方法：
• 给卡片加 display: flex; flex-direction: column;，再让内容区 flex: 1 撑满剩余高度
• 图片统一用 object-fit: cover; aspect-ratio: 4/3; 防止拉伸变形
• 标题限制行数：用 display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden;
• 避免全局设 align-items: stretch，尤其当卡片内容结构差异大时，反而暴露大片空白
安卓微信里 Grid 不生效怎么办
老版微信 X5 内核对 Grid 支持极差：auto-fit 直接失效，gap 被忽略，grid-column: span 2 完全不识别。
必须做降级：
• 先用 @supports (display: grid) 包裹 Grid 样式
• 降级方案用 Flexbox：display: flex; flex-wrap: wrap; 配合 flex-basis: calc(50% - 8px) 模拟两列
• 间距改用 margin 模拟 gap，但注意首尾卡片多出的外边距要额外清除
• 跨列需求（如 iPad 上横跨两列）得单独抽离逻辑，X5 内核根本不认 grid-column
真正麻烦的不是写对那两行 Grid 代码，而是业务数据结构千奇百怪——比如某张卡片突然要加轮播图、某张要嵌 iframe、设计师临时说“这个只在 iPad 上跨两列”，这些都会让 minmax() 的弹性计算失效，得靠具体 case 具体兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
