CSS Grid 是实现十二宫格的首选方案，只需设置 display: grid 和 grid-template-columns: repeat(4, 1fr)，配合 gap 控制间距；响应式推荐用 repeat(auto-fit, minmax(220px, 1fr))) 自动适配列数。
用 CSS Grid 实现十二宫格最直接
十二宫格本质是 3×4 或 4×3 的二维网格，display: grid 是原生支持、语义清晰、响应式友好的首选。别绕路用浮动或 inline-block 模拟——容易错位、难对齐、媒体查询写起来累。
关键就两步：
- 给容器设
display: grid，再用grid-template-columns定义列数和宽度（比如repeat(4, 1fr)表示 4 列等宽） - 用
grid-template-rows或靠子项自动撑开（更常用），不需要显式设行高 - 加
gap控制间距，比margin更干净，不触发外边距合并问题
示例代码：
.grid-12 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
子元素只需按顺序写进 HTML，Grid 自动按行优先填满 4 列 × 3 行。
立即学习“前端免费学习笔记（深入）”；
Flexbox 能做但得手动分组
Flexbox 本身是一维布局，强行做十二宫格要额外包裹层级，比如每 4 个 <div> 包一层 .row，再对每行设 display: flex。代码冗余、可维护性差，且换 3×4 和 4×3 布局时要改 HTML 结构。
常见翻车点：
- 忘记给
.row设flex-wrap: wrap，导致子项溢出容器 - 用
justify-content: space-between时，最后一行不满 4 项会左右拉开，视觉失衡 - 不同屏幕下列数变化时，Flex 需配合 JavaScript 或大量媒体查询重排，不如 Grid 的
repeat(auto-fit, minmax(200px, 1fr)))灵活
避免用 float 或 table 做十二宫格
float 在现代布局中已淘汰：清除浮动易漏、父容器高度塌陷、响应式几乎不可控；display: table 系列则语义错误（表格用于数据，不是布局），且单元格宽高强制一致、无法独立设置子项样式。
真实项目里踩过这些坑：
- IE 下
float+margin计算误差导致最后一列掉行 -
table-cell中的子元素设width: 100%会撑破容器，因为 table 布局有自己的宽度算法 - 所有这类方案在移动端横竖屏切换时，基本要重写整套 CSS
响应式十二宫格的关键参数
真正实用的十二宫格必须适配手机、平板、桌面。Grid 的 repeat(auto-fit, minmax())) 是核心，而不是写死 repeat(4, 1fr)。
推荐写法：
.grid-12-responsive {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)));
gap: 12px;
}
解释：minmax(220px, 1fr) 表示每列最小 220px、最大均分剩余空间；auto-fit 会让浏览器尽可能多放列，放不下就自动折行——小屏变 2 列，中屏变 3 列，大屏稳住 4 列，天然达成 12 项的弹性分布。
注意：auto-fill 和 auto-fit 行为不同——前者预留空列，后者收缩空列，日常用 auto-fit 更省心。
复杂点在于内容高度不一致时，Grid 默认按行对齐，若某格文字多、图片高，会拉高整行。这时候得看是否需要 align-items: start 或给子项设 height 统一基准——但别硬设固定高度，否则文字截断或留白难控。
