什么是栅格系统

经常能听到“栅格系统”这个词，但却不知道真正的栅格系统是什么，不知道它在设计中是如何应用的。大厂 95%的的设计都会应用到栅格系统，栅格系统在 UI 设计中的应用是非常广泛与重要的。那栅格系统是什么？它又有什么作用呢？

什么是栅格系统

栅格系统（grid systems），也叫做“网格系统”，是一种运用固定的格子来设计页面布局，使布局简洁规范有秩序。在二战后大受欢迎，已成为今日出版物设计的主流风格之一。

栅格系统无处不在，只是我们没有发现而已。栅格系统就像版面布局的骨架，像一张无形的网在规范着我们的设计，让设计更加有秩序美。

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

定义为以规则的网格来规范页面中的版面布局以及信息分部，使页面变得简洁整齐有层次感。这也是设计的基本原则，利用网格有规律的对页面进行排版布局，适用范围广告排版、海报画册、网站移动端等

栅格系统的作用

1.辅助我们更规范排版布局与信息分布，让页面产生秩序美

2.提高页面布局的一致性与复用性，减少设计师思考基础布局，提升设计效率

3.响应式布局，更好适配不同设备，让开发更好的还原设计效果

任何好的设计的秘密在于它的视觉元素的组织方式和元素间相互关联的位置。栅格系统刚好有此作用。栅格系统在 UI 设计中的应用，不仅能让页面更加规范，让元素之间更加平衡，看起来更和谐；还能大大提高设计师与开发工程师的工作效率。

为什么要做栅格系统

1. 设计内容都应该有所依据
2. 让版面更有层次感更协调
3. 准确放置元素的位置
4. 可以根据不同浏览器的分辨率大小来调整页面的显示宽度的缩放，保证页面都显示全，且不变形

栅格系统的组成要素

栅格系统是由栏（Column）跟水槽（Gutter）交替分布形成的。栅格系统的组成要素有栏、水槽、边距。

1.栏（Column）

栏是从上到下的垂直空间区域，是承载内容的容器。我们的内容一般都是放在栏里面的（栏与水槽结合使用也是用来承载内容的）。在 web 端栏一般为 12 列与 24 列，移动端一般为 6 列、8 列与 12 列。具体栏数可以根据产品内容来定。界面布局样式越多、栏数建议越多，因为栏数越多组合方式就越多。

2.水槽（Gutter）

水槽（Gutter）相邻两个栏之间的间距，把控着页面的留白与呼吸感。水槽越大页面布局间距就越大，给人的视觉感受就是大留白、呼吸感强。水槽越小页面就越紧凑，页面元素就会越拥挤。

3.边距（Margin）

页边距可以视为安全距离。移动端主要是两边与屏幕的边缘距离，网页端就是指两边的留白区域。