Figma:布局栅格(Layout Grid)怎么用才不虚

栅格的目标:一致与可扩展

栅格不是为了“看起来专业”,而是为了让界面能在不同屏幕尺寸下保持一致的对齐与节奏。

三要素:Columns / Margin / Gutter

Columns 是列数,Margin 是左右边距,Gutter 是列间距。移动端常见 4 列或 8 列;桌面端常见 12 列。Margin 与 Gutter 建议用 8 的倍数,利于整体节奏统一。

移动端常见配置

例如:宽 375 的画板,用 4 或 8 列;margin 16;gutter 16。关键是保持卡片与文本块在列线上对齐,而不是随意摆放。

桌面端常见配置

例如:1440 宽,用 12 列;margin 80-120;gutter 24。内容区通常不要占满全宽,留白能提升可读性。

实战建议

1)先定内容宽度,再定列数;2)组件内部也用 8pt spacing 与栅格呼应;3)栅格是约束,不是束缚,遇到特殊版式可局部打破但要有理由。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

暂无评论,快来抢沙发吧~

操作成功