【基础】秒懂栅格系统

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

1、历史缘由

原始人们在进行刊物发版的时候发现一个问题，由于不同作者风格不一及当时刊物切割工具的限制，导致在刊物版式设计中需引入出血线避免刊物核心内容的缺失。

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

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

2、啥是栅格？

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

2.1、啥是网格?

网格(Gird)是栅格系统的基础，其尺寸根据业务需求精细设定。在互联网设计中，8单位网格尤为常见，为产品人提供高效灵活的布局参照。

以1920x1080分辨率的屏幕为例，若页面完全遵循版式设计，在8x8像素的网格单元下，页面被划分为32400个网格单元，为产品人提供了清晰的设计框架。

2.2、啥是列？

列（Column）是栅格系统的关键，代表栅格数量，用于版式设计中内容的对齐和布局。调整列数可控制版面效果：列多则精细紧凑，列少则疏松开阔。列数选择应基于业务和设计目标，常见设置有12列和24列。

2.3、啥是水槽？

水槽（Gutter）是列间的留白，分隔版面元素。其宽度影响设计风格：宽敞时版面宽松自由，压缩时则紧凑有序。

2.4、啥是间距？

边距（Margin）是指版面内容到边缘（屏幕、纸张等）的距离，一般是作为留白的作用。

2.5、啥是栅格总宽？

栅格总宽（Container）是所有列、水槽和边距宽度的总和，代表整个版面的宽度。

2.6、啥是容器盒子?

容器盒子（Col-n）是版面元素内容，产品人定义其占用列宽，便于内容复用和快速组合成完整设计方案。

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

3.1、 先定好布局

在设计Web端页面时，产品人需根据实际的场景确定好整体布局风格后才能进行栅格系统的设计，常见的布局风格如下：

3.2、 再确定栅格总宽

需注意的是：版面内容宽度并不等同于栅格系统设计的宽度，在大多数情况下会在版面内容中选择一块区域的宽度作为栅格系统设计的部分。如下：

3.3、 列数是多少得确定好

3.3.1、整12栅格？

12列栅格常用于信息简单的商业和门户网站，易整除（2、3、4、6），适合等分布局。

3.3.1、还是整24栅格？

24列栅格适合复杂多样信息的B端Web设计，提供更大布局空间与灵活性。虽列数多难整除，但差异细微，不影响视觉效果。栅格设计旨在保持视觉协调，不必过于追求像素完美。

3.4、 自己定好水槽与边距

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

类型	宽度
小水槽	8px
中水槽	16px
大水槽	24px
大大水槽	32px
大大大水槽	40px

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

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

3.5、大功告成

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