应使用 css grid 的 gap 属性替代 margin 控制商品网格间距，它作用于轨道间、不侵占项目尺寸；配合媒体查询按屏幕宽度切换列数与 gap 值（如桌面 4 列 gap:1.25rem，767px 下 2 列 gap:0.75rem，479px 下单列 gap:0.5rem）；嵌套结构需分层设置 gap；单位优先用 px/rem/vmin，避免 %/em。
在移动端商城中，商品网格的间距不能靠子元素的 margin 硬调，否则容易因宽度叠加导致换行错乱或溢出。真正稳定的做法是用 CSS Grid 的 gap 配合媒体查询统一控制——它作用于网格轨道之间，不侵占项目自身尺寸，响应式切换也干净利落。
用 gap 替代 margin 控制网格内距
Grid 的 gap 是容器级间距，只对 display: grid 容器生效，且不会和子项 margin 叠加造成意外留白。移动端商品列表推荐直接设置：
- 桌面端：列数多，gap 可稍大，例如
gap: 1.25rem（20px）营造呼吸感 - 移动端：屏幕窄，缩小 gap 避免挤压卡片，例如
gap: 0.75rem（12px） - 注意不要写
gap: 0来“清除”，想临时关闭就删掉该声明
配合媒体查询切换列数与间距
列数变化时，gap 值也应同步调整，避免小屏下四列变两列后间隙显得过大：
- 基础网格设为 4 列：
grid-template-columns: repeat(4, 1fr) - 768px 以下切为 2 列：
@media (max-width: 767px) { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } - 480px 以下切为单列，并可进一步收紧：
@media (max-width: 479px) { grid-template-columns: 1fr; gap: 0.5rem; }
嵌套结构中 gap 不穿透，需分层设置
如果商品卡片内部还有标题、价格、按钮等子模块，它们的间距不能指望外层 grid 的 gap 覆盖——gap 只作用于直接子项。此时应：
- 外层 grid 控制商品卡片之间的间距
- 卡片内部用 flex 或内层 grid + 自身 gap 管理图文排布
- 避免在卡片外再包一层无意义的 div，否则它会成为 grid item，真实内容反而脱离 gap 影响范围
兼容性与单位选择要稳妥
gap 在现代浏览器中支持良好，但单位使用仍有讲究：
- 优先用
px、rem或视口单位（如vmin），避免在旧 Safari 中失效 - 不要用
%或em作 gap 值，部分版本会忽略 - 若需动态缩放，建议用媒体查询切换不同 gap 值，而非依赖 rem 根字体变化
- 确认父容器 computed style 真是
display: grid，常见错误是只写了display: -ms-grid却没配 IE 前缀
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
