【基础】秒懂栅格系统

大家好，欢迎来到IT知识分享网。

前言：标准 or 创新？This is a question~

1、历史缘由

针对这个问题，有些个原始人如法国的尼古拉斯加宗主导提出栅格系统的理念：运用固定的格子设计版本布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。

这理念的核心思想在图标设计、网页设计等平面设计领域都有着明确的指导意义。

2、啥是栅格？

一个常见的栅格系统设计如上图所示，而各个名词之间定义及以及关联关系如下描述：

2.1、啥是网格?

2.2、啥是列？

2.3、啥是水槽？

2.4、啥是间距？

2.5、啥是栅格总宽？

2.6、啥是容器盒子?

3、整个自己的栅格试试吧

3.1、 先定好布局

3.2、 再确定栅格总宽

3.3、 列数是多少得确定好

3.3.1、整12栅格？

3.3.1、还是整24栅格？

3.4、 自己定好水槽与边距

水槽是列间隔，以8px为单位设定，保持视觉统一，常见的水槽定义宽度如下：

数值大小取决于产品调性和设计，数值越大留白越多。确定内容区和水槽后，计算列宽并居中显示，两侧形成边距。

列宽 = （版面宽度-所有间距宽度-所有水槽宽度）/ 栅格数
= （1600 – （200
2）- （（12-1）24））/ 12
= 78px

3.5、大功告成

至此完成完成了对整体版面的栅格设计。