布局网格：Grid

新手把元素一个个拖到画板上，看起来总觉得"东倒西歪"——这个头像偏左一点、那个文字右移两像素、这块又没跟上一块对齐。问题不在单个元素，而在没有一张"格子纸"兜底。网格就是页面的骨架：把屏幕分成几列，让所有元素都有"该站的位置"。有了它，内容才能对齐、站成排。

网格 = 列 + 间距 + 边距

网格 Grid 的核心，是把内容区划分成"列 + 间距 + 边距"三件套：

• 列 columns：把内容区竖向分成几条等宽的"跑道"，元素在里面排队。
• 间距 gutter：两条列之间的空隙，防止相邻列里的内容贴在一起。
• 边距 margin：内容区与屏幕左右边缘的留白，让内容不贴边。

网格 = 列 columns（等宽跑道）+ 间距 gutter（列间空隙）+ 边距 margin（左右留白）。

为什么偏偏是 12 列

12 列网格是移动端最常用：把屏幕宽平分成 12 列，内容可占 1 列、2 列、6 列、12 列……这是设计师选 12 的数学原因——12 的因数多，能整除、不产生小数点。2 列（每列 6）、3 列（每列 4）、4 列（每列 3）、6 列（每列 2）都能整整齐齐切出来。手机界面常见"左文字右内容""一行三个图标"这类分栏，12 列几乎都能干净地切出，不用出现小数列。

12 能被 1 / 2 / 3 / 4 / 6 / 12 整除：2 列每列 6 · 3 列每列 4 · 4 列每列 3 · 6 列每列 2。

怎么选列数：让内容决定网格

没有"放之四海皆准"的列数，取决于内容。网格服务于内容——内容需要几列就选几列，而不是先定一个网格再硬塞内容。通用移动端用 12 列最灵活；信息简单、主要单一列阅读的页面用 6 列；卡片方块类（如图标宫格）用 4 列。

选列数对照：

列数	适用场景
12 列	通用移动端，分栏组合最灵活（最常见）
6 列	信息简单、主要单一列阅读的页面
4 列	卡片方块类（如图标宫格）

网格管列、间距管空隙：与间距体系配合

打开微信首页（消息列表），表面看没有网格，其实每条消息都在同一套 12 列网格里对齐：头像都贴在左侧同一列（左缘连成一条垂直线）、昵称文字跟在头像旁固定一列、时间/未读数字靠右侧边距与左边对齐。因为所有列表项都踩在网格线上，整页才显得"站得笔直"。

网格要和**间距体系（08）**配套用，两者分工不同：网格决定"列的位置"——元素站在哪条跑道、占多宽；间距体系决定"元素之间的间隙"——同一条跑道里，元素和元素离多远。网格是"大骨架"，间距是"小留白"：先定网格让内容对齐，再用 8pt 标尺统一空隙（如 gutter、margin 取 16px），两者一体，页面才既对齐又整齐。

微信首页 375 宽套 12 列：左右边距各约 16px · 余 343px ÷ 12 ≈ 每列约 26px · gutter 约 8px · 头像 44px 约跨 1 列半。

深度

为什么 12 列的因数咬合得这么顺？ 12 的因数有 1、2、3、4、6、12，能等分成多种组合：2 列（每列 6）、3 列（每列 4）、4 列（每列 3）、6 列（每列 2）。手机界面常见"左文字右内容""一行三个图标"这类分栏，12 列几乎都能整整齐齐切出来，不用出现小数列。这是设计师选 12 的数学原因——整除、不产生小数点。

三行代码看懂网格结构（示意，重点看结构）：

grid: 划分成 12 列            ← 12 列
gap:   列与列之间的间距         ← gutter
margin:左右留白 16px           ← 边距

微信首页 12 列网格拆解（可合理推断）：以 375 宽（iPhone 标准）为例，左右边距各约 16px（取下 8pt 体系 --space-md）；去掉边距后余约 343px ÷ 12，每列约 26px、gutter 约 8px；列表项里头像占左侧 1 列附近（44px 头像约跨 1 列半）、昵称文字占其后固定列、时间/未读靠最右列；关键对齐线是所有头像左缘、所有昵称左缘、所有右侧时间右缘分别对齐。> 说明：微信 iOS 版实际实现可能随版本微调，这里给出的是以 12 列网格推断的合理值，用于学习"如何拆解"而非精确工匠数据；你可以在 Penpot 里导入微信截图，叠加网格核对。

Penpot 实操：用 12 列网格重建微信首页列表。新建 375×812 画板后：画出左右边距各 16px；把 375 − 32 = 343 分成 12 列（每列约 26px + gutter 约 8px），画一条竖的网格线；放 5 条消息，头像（44×44）都贴左缘同一列、昵称贴头像后固定列、时间靠最右列；打开网格线核对所有左缘/右缘是否对齐；关掉网格、把一条头像往右挪 3px，看它是不是"长歪了"。

误区

误解	正解
网格限制自由	网格给的是秩序，不是束缚；元素在网格内依然可上移下移、调整宽度，只是有了对齐的锚点
12 列万能	12 列只是常用，不是唯一；简单内容用 6 列、卡片内容用 4 列，列数随内容定
有了网格就不用管间距	网格管"列的位置"，间距管"元素间隙"，两者配合才完整（呼应 08）
元素随手放、靠感觉对齐	没有网格兜底，元素永远"感觉"对齐不了，会东倒西歪
网格越多越专业	列太多反而复杂难维护，选满足内容的最小列数即可

练习

即时题 Q：一个新手把微信首页的消息昵称、时间各自"看着差不多"地放，结果头像左缘参差不齐。请问他缺了什么？如果给他一张 12 列网格，这些元素应分别对齐到哪些网格线上？

答案

缺一张"格子纸"（网格）兜底。有了 12 列网格，所有头像左缘对齐到同一列、所有昵称左缘对齐到随后的固定列、所有时间右缘对齐到右侧同一列——因为都踩在网格线上。

模块题 Q：用 12 列网格设计一个"首页宫格"：顶部一条通栏（占满 12 列）、中间一行三个功能图标（各占 4 列）、底部一条消息列表（左头像 + 右文字）。请说明每一块各占几列、为什么，以及 gutter 和 margin 各取多少（用 8pt 标尺）。

参考思路

顶部通栏占满 12 列（一行一整块）；中间 3 个图标各占 4 列（3 × 4 = 12，正好整除、不产生小数）；底部消息列表左头像占 1 列附近、文字占其后若干列。gutter 与左右 margin 取 8pt 标尺刻度，如 16px（`--space-md`）。

迷你案例：在 Penpot 里重建微信首页列表并验证对齐。新建 375×812 画板，画出左右边距各 16px；把 375 − 32 = 343 分成 12 列（每列约 26px + gutter 约 8px），画一条竖的网格线；放 5 条消息，头像（44×44）都贴左缘同一列、昵称贴头像后固定列、时间靠最右列；打开网格线核对所有头像左缘、昵称左缘、时间右缘是否对齐；关掉网格、把其中一条头像往右挪 3px，看它是不是"长歪了"。做完你会理解：不是你会不会偷懒，而是没有网格，你根本对不齐。

素材

• 👉 打开交互演示：12 栅格布局 — 在微信首页上叠加/隐藏 12 列网格，看元素如何踩线对齐；用 12 / 6 / 4 列滑块对比哪种网格下内容依然对齐、哪种会乱。
• Bootstrap 网格系统：Bootstrap 官方文档的 Grid 章节（12 列栅格最经典实现，含 gutter/margin 概念）。
• Material Design 3：Layout / Responsive UI 章节（官方网格与断点规范）。
• Apple HIG：Layout 与 Spacing 章节（苹果官方布局原则）。
• 视频：搜索 "12 column grid explained"（直观演示 12 列网格如何布局）。
• 工具联动：网格配合 08 间距体系（8pt 标尺）使用；13 Auto Layout 会进一步让网格自动伸缩，形成完整结构体系。

---