最直接用 display: grid 实现九宫格，因其天然匹配3×3等宽等高布局；避免 float 和 inline-block 的兼容与计算问题；关键设置包括 repeat(3, 1fr)、gap、align-items: start；响应式推荐 auto-fit + minmax()；ie11 应降级为 flex-wrap。
用 display: grid 最直接，别碰 float 或 inline-block
九宫格本质是 3×3 的等宽等高二维布局，grid 天然匹配。用 float 需清浮动、算 margin；用 inline-block 有空白字符干扰，还得 hack 字体大小——现在没理由绕开 grid。
关键不是“能不能”，而是怎么设得稳：
-
grid-template-columns: repeat(3, 1fr)—— 三列均分容器宽度，比写死33.33%更可靠（避免小数像素累积误差） - 加
gap: 12px控制间距，比在子项上设margin更干净（不会影响首行/末行外边距） - 如果商品卡片高度不一致，加
align-items: start防止底部错位（默认是stretch，会强行拉高）
响应式断点下要改列数，别只靠媒体查询硬切
纯靠 @media 写多个 grid-template-columns 容易漏覆盖或冲突。更稳妥的是结合 minmax() 和 auto-fit：
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 12px;
}
这段代码的意思是：每列最小 280px，最大占满剩余空间，浏览器自动算出能放几列——手机横屏放 2 列，小平板放 3 列，桌面放 4 列，逻辑自洽。
注意：auto-fit 会合并空轨道，auto-fill 则保留空轨道，这里必须用 auto-fit。
商品图文字垂直居中时，flex 比 line-height 可靠
九宫格里常把标题和价格叠在图片上，需要居中。很多人用 line-height 匹配高度，但一旦字体大小变化或换行就崩。
推荐在卡片内部用 flex：
.card {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 200px; /* 卡片固定高 */
}
这样即使文字两行、图标插入，也能稳居中。如果卡片高度不固定，就用 position: relative + position: absolute 配合 transform: translate(-50%, -50%)，但需确保父容器有定位上下文。
IE11 兼容？别强撑，用 display: -ms-grid 是徒劳
IE11 的 -ms-grid 语法和标准 grid 不兼容：不支持 gap、auto-fit、minmax()，连 fr 单位都要手动换算成百分比。实际项目里，为它单独维护一套降级样式，成本远高于加个 flex-wrap 布局兜底。
真要兼容 IE11，直接放弃 grid，改用：
-
display: flex+flex-wrap: wrap - 每个商品设
flex: 0 0 calc(33.333% - 8px)（减去间隙一半） - 用
margin模拟gap，首项清除左 margin，每第 3n+1 项清除左 margin
不过现在大多数业务已明确不支持 IE11，优先写标准 grid，再用 @supports 包一层降级更省心。
网格线编号、grid-area 命名这些进阶功能，九宫格里基本用不上。先保证三列对齐、间距均匀、响应自然，剩下的都是锦上添花。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
