用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 实现真正响应式商品列表，避免断点错位；禁用 auto-fill 防留白，大屏上限用媒体查询兜底。
grid-template-columns 怎么设才不踩“断点错位”坑
用 grid-template-columns 布商品列表时，常见错误是写死列数，比如 repeat(4, 1fr) —— 屏幕一缩，四列挤成一团，小屏直接溢出。这不是响应式，是“假装响应式”。
真正管用的做法是结合 minmax() 和 auto-fit：
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 是最稳的起点：每项最小 280px，大屏自动铺满，小屏自动回退为单列
- 别用 auto-fill，它会预留空轨道，导致最后一行留白难控制
- 如果要固定最大列数（比如最多 5 列），得加媒体查询兜底，@media (min-width: 1200px) 里覆盖成 repeat(5, 1fr)
gap 设置后商品卡片高度不齐，怎么办
gap 本身不会导致高度不齐，但很多人忘了卡片内容高度天然不同，又没统一高度策略，视觉上就“歪了”。
关键不是调 gap，而是控卡片容器：
立即学习“前端免费学习笔记（深入）”；
- 给每个商品卡片加 display: flex; flex-direction: column，再让内容区（如标题、价格、按钮）用 margin-top: auto 推到底部，保证底部对齐
- 或者更直接：给卡片设 height: 100% + align-items: stretch，但前提是父级网格有明确高度约束（比如 grid-auto-rows: minmax(300px, auto)）
- 避免对卡片直接设固定 height: 300px，文字换行或图片加载延迟会导致截断或撑破
移动端下 gap 太大，又不想写两套 CSS
gap 支持响应式单位，但不能直接写 gap: 1rem 1.5rem 然后指望它随屏幕变——它只会按当前根字号缩放，和视口宽度无关。
解决方法很简单，也最可控：
- 用 clamp()：比如 gap: clamp(0.5rem, 2vw, 1.25rem)，小屏取 0.5rem，大屏逼近 1.25rem，中间线性过渡
- 或者更保守：只在媒体查询里改，@media (max-width: 768px) { gap: 0.75rem }，比 clamp() 兼容性更好（IE 不支持，但你本就不该在 IE 里用 Grid）
- 别用 % 设 gap，它不解析为相对于容器的百分比，而是无效值，降级为 0
grid-area 写错导致商品顺序乱掉
grid-area 一般不用在商品列表这种同质化结构里，强行用反而容易出错。但有人为了“精确控制某几个广告位”硬塞，结果发现商品顺序和 DOM 顺序不一致。
根本原因是：一旦用了 grid-area，你就得配 grid-template-areas，而这个声明会完全接管布局流，DOM 顺序失效。
稳妥做法是：
- 普通商品列表，老实用 grid-column / grid-row 微调个别项，比如让第一个商品占两列：grid-column: span 2
- 要插广告位，用 ::before 或 JS 动态插入元素，别依赖 grid-area 打乱主列表结构
- 如果真要用 grid-template-areas，必须确保所有商品项都显式声明区域名，漏一个就会让后续项整体偏移
复杂点在于：网格布局的“隐式轨道”行为很难肉眼预判，尤其当内容动态加载、高度不确定时。最保险的验证方式，是打开浏览器开发者工具，勾选“Show grid line numbers”，一眼看出轨道是否对齐。
