如何自定义栅格系统

栅格系统（grid systems）

规则的网格阵列来指导和规范网页中的版面布局以及信息分布。

基本原理

在网页设计中，把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”。关系如下：

W =（a×n）+（n-1）i

把a称为“列”，对应代码中的Column；i称为“水槽”，对应代码中的Gutter。

自定义设计一个栅格系统，本质就是定义a，i，n的数值。

n值：n为栅格数。常见的n值有10，12，24，36等，n等于几通常就称几栅格系统，如Ant Design中的24栅格系统https://www.zcool.com.cn/article/ZMTIxMjMwNA==.html

i值：i为间距。间距数值应该是偶数，常见的有8，16，24，32等。

a值：a为列宽。列宽和系统功能或业务是息息相关的，需要从功能方面考虑，选定合适的a值。常见值有24，25等。

我认为确定a，i，n的数值几乎是同时的，没有先后顺序的。因为公式：W =（a×n）+（n-1）i的相互影响，我们必须同时确定每一个值，然后计算得出W。

那些常见的栅格系统

1128栅格系统：

画板宽度1440px ，a=i=n=24,这是一组简单美妙的数值，可算得W=（24x24）+23x24=47x24=1128px；将栅格居中于画板(偏置156px)，此时的栅格系统如下：

用于客户端布局：

1152栅格系统（Ant Design）：

这个栅格系统的美感在于，宽度W=48x24=1152px，两边的留白为画板1440px宽度的1/10等于144px。

以上两个栅格系统都是24栅格系统，你可以快速创建2等分、3等分、4等分、6等分布局，也可以进行1：2：1、   1：3：2 等不对称分割的布局。

1130栅格系统：

使用者站酷ZCOOL:

1296栅格系统：

使用者追波dribbble：

“厂”型布局-栅格系统

“厂”型布局的左侧菜单栏固定不动，栅格系统偏置侧边栏宽度即可。

Ant design Pro