auto-fit + minmax() 是首选组合，因浏览器自动计算列数：minmax(280px,1fr) 设定列宽范围，auto-fit 清除空列，避免窄列变形；gap 比 margin 更可靠，原生支持间距控制且无边缘冗余。
直接用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 就能跑通绝大多数设备，不需要为 iPad、MacBook 或折叠屏单独写断点。
为什么 auto-fit + minmax() 是首选组合
这个组合让浏览器自己决定列数，而不是靠人猜断点：
– minmax(280px, 1fr) 表示每列至少 280px 宽，内容多时再均分剩余空间
– auto-fit 会把没内容的空列直接“收走”，避免小屏下出现被压扁的窄列
– 错误写成 auto-fill 会导致最后一列只剩 1px 宽，卡片文字强制换行或图片拉伸变形
– 别写 repeat(3, 1fr) 这类固定列数，缩放时要么留白要么横向滚动
gap 比 margin 更可靠
用 gap 控制卡片间距，不是给每个 .card 加 margin：
– gap: 1.5rem 只作用于网格项之间，不会在容器边缘多出半倍间距
– 用 margin 就得额外处理 :first-child、:last-child 或负边距
– gap 在 Grid 中原生支持，旧版 Safari（iOS 16.4 以下）需加 -webkit-gap 前缀
– 如果设计要求“首行无顶 gap、末行无底 gap”，说明这不是 Grid 场景，该换 Flex + wrapping
卡片内容撑不开高度？先查这几个地方
align-items: stretch 默认生效，但容易被悄悄关掉：
– 卡片自身写了 height、min-height 或 max-height（删掉或设为 min-height: 0）
– 卡片内部用了 margin-top: auto，但父容器不是 display: flex
– Grid 容器的父级有 max-height 或 overflow: hidden，切断了高度传递链
– 图片没加 object-fit: cover 或 aspect-ratio，加载抖动导致高度跳变
什么时候才需要 media query
只在内容结构发生质变时加断点，不是为了调列数：
– 比如手机屏上标题从一行变成两行，按钮从右侧移到底部
– 小屏（max-width: 480px）强制单列：直接写 grid-template-columns: 1fr
– 别在媒体查询里写 repeat(2, 1fr) ——这和 auto-fit 的自动能力冲突
– 真要微调，优先改 minmax() 的最小值，比如桌面端提至 320px，比新增一套 grid 模板更轻量
– IE11 不支持 auto-fit，用 @supports (display: grid) 隔离代码，老浏览器回退到基础流式布局
最常被忽略的是 Grid 容器本身得有可计算的高度上下文——如果整个网格区域高度为 0，stretch 就没东西可拉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
