栅格不是为了“看起来专业”,而是为了让界面能在不同屏幕尺寸下保持一致的对齐与节奏。
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)栅格是约束,不是束缚,遇到特殊版式可局部打破但要有理由。