07 · 布局网格（12 栅格叠加）

网格是页面的「格子骨架」。在微信首页示意图上叠加 12 列网格，看列表项如何踩线对齐；切换列数、调间距边距，体会「不同内容选不同网格」。

网格控制

12 列因数多（1/2/3/4/6/12），分栏组合最灵活，移动端最常用。
纵向对齐线：头像左缘
纵向对齐线：昵称左缘
纵向对齐线：时间右缘
关掉网格，把某条头像往右挪一像素——它立刻「长歪了」。不是不会偷懒，是没有网格根本对不齐。
微信首页 · 消息列表（375px 宽） 12 列 · gutter 8px · margin 16px
9:41消息
微信通讯录我
设
产品设计交流群
小明：新版配色大家看看
昨天
12
爸
老爸
记得吃晚饭
15:30
传
文件传输助手
[图片] 设计稿第一版
14:02
3
资
设计资源共享
周分享：Type Scale 实操
13:45
所有头像左缘、昵称左缘、时间右缘都踩在网格线上，整页才「站得笔直」。