在平时做页面时由于电脑分辨率适配，页面显示不全等问题，翻阅了一些资料进行整理， 介于自己的理解简述栅格系统的运用

首先说什么是栅格系统？

栅格最早起源于平面设计。1692年法国为提高印刷水平，以方格为设计基础，将一个印刷版面分成上千个小格，这就是最早的栅格雏形。再后来，慢慢演变成运用固定的格子设计版面的平面设计风格。

定义为以规则的网格来规范页面中的版面布局以及信息分部，使页面变得简洁整齐有层次感

y也是设计的基本原则，利用网格有规律的对页面进行排版布局，适用范围广告排版、海报画册、网站移动端等

为什么要做栅格系统？

1.设计内容都应该有所依据

2.让版面更有层次感更协调

3.准确放置元素的位置

4.可以根据不同浏览器的分辨率大小来调整页面的显示宽度的缩放，保证页面都显示全，且不变形

栅格系统中的元素

在UI设计栅格系统中的最小单位就是设计界面的单位基础，界面设计元素和排版都是按照这个基础单位建立和布局的，常见web端最小单位是10，移动端常用最小单位是3、4、5，6，不过也不是固定的，目前最小单位变得越来越大了。水槽和边距不要放置内容。

栅格系统包括：边距、列、水槽、大列宽、内容区、总宽度

屏幕安全边距：栅格外的屏幕边缘内容，这里是内容的边距留白，不可放内容，是水槽宽度的1/2

列：是栅格系统纵向排布方式，常用的pc端是12列，移动端是6列。列数越多纵向排布内容就约细致，反之内容变得更琐碎。

水槽：列与列、行与行之间的间距，水槽宽度决定布局的间距，水槽不要放置内容

内容区：行与列的交汇处，放置内容，内容不要放在水槽范围，列宽或行宽的开始到结束为内容区

因为大多数都是页面都是瀑布流形式，所以也是可以根据来设置行数的

如何计算？

例如：宽度1920，常用于12栏，得到的1列A（小列+水槽）是1920除以12=160，列宽为120，水槽为40,（3:1）。左右边距是20（与水槽比例2:1），这样就是1920的栅格系统。

示例：

当n ＝ 24, i = 10;假如A＝40，则W＝950；

当n ＝ 24, i = 20;假如A＝50，则W＝1180；

只是举例，具体还需要与实际项目相结合。

在设计页面中怎样定义栅格系统，首先要看你的项目是什么类型的，之后设置页面中的最小单位，最后决定水槽和安全边距，得到内容区的大小

1.确定页面宽度，选择尺寸：1920、1600、1366、1280等，也要考虑适配的浏览器

2.根据项目的复杂度来置顶等分，常见12列的栅格系统，少内容可用4、6等分。特多内容且复杂可用24列的栅格系统

3.根据内容布局页面，确定间隔，间隔尺寸是多少，6px、8px、10px、12px和20px，使用双数较好整除

ps设置栅格系统小技巧：

1.新建画板，定义的页面尺寸

2.视图-新建参考线版面

3.设置参数

设置行数6行

总结重点：

1.常见web端最小单位是10，移动端常用最小单位是3、4、5，6，

2.常用的pc端是12列，移动端是6列 ，水槽和边距不要放置内容。 

3.公式：大列宽  乘以  N  减去 安全边距          备注：大列宽（列宽+水槽） N分成的列数

Powered by Froala Editor