What is a grid system
English as a grid system Grid Systems, also translated as the grid system.
Definition: the use of a fixed grid, follow certain rules, page layout design, the layout specification concise rules.
1. Grid
Grid originated in Graphic Design. 1692 France to improve the level of printing, checkered basis for the design, layout into a print thousands of small cells, this is the first prototype of the grid. Still later, slowly evolved into the use of fixed lattice design layout graphic design style.
2. Web page grid
Including web and mobile sides, a regular grid array is to guide the layout information and the distribution interface specifications.
3. Why use a grid
By using the grid, you can use logic to explain the details of commercial design.
Design should be based on the content, when others questioned the system could have emboldened explain design content. Designers can use the grid so that the screen is more tonal, so that content more readable; location can be quickly calibrated elements, so that the picture is more balanced; Modular can manage elements, so the layout more layered.
4. The seven elements grid foundation
The smallest unit
You need to set a good interface unit basis, the subsequent content elements and layout rules that are based on integer multiple increments.
Web client smallest unit: 10
Mobile terminal minimum unit: 3,4,5
Total width / W
Total Width: overall layout specification, and may also be sized to ensure uniformity.
Interface design must have specific dimensions, since the content much uncertainty, so there is no way to set the height of the dead, but the width of the content area is given.
Columns / N
The number of columns is set up after the total width of the interface, and the like is divided into several longitudinal columns.
· Web side: 12, 24 (the number of columns used aliquots, of course, is not fixed, it is necessary to set the number of columns according to their content)
The mobile terminal: 6 (the number of columns used aliquots)
Large column width / L
The total width of the interface is divided into columns, each column is the width of the large column width.
· Formula: L = W / N
Big column width include: column width and sink
Water tank / G
The spacing between two adjacent columns is wider sink.
The larger the tank width, blank page and a sense of breathing better, on the contrary is more compact. Sink more standardized content zone can be distinguished.
Safety Margins / M
About interface ensures readability and aesthetics, the suitable gap is safe margins.
After Sketch set up in the sink, the margin is 0.5 times the sink.
Calculated: M = G / 2
5. Safety Margins
除了使用水槽的0.5倍，还可以使用0、0.5、1.0、1.5、2.0等水槽的倍数。举例：水槽是20，使用0.5倍，安全边距为10；水槽是20，使用2.0倍，安全边距为40。
栅格是辅助页面布局的，所以需要根据实际内容灵活的使用栅格，而不要被栅格所束缚。
6. 各种公式汇总
N 是自定义设置的列数。
小结
在 Sketch 里设置栅格，定义好3个数值即可，总宽度、列数和水槽，这三个内容定义好数值后，其他内容就会自动计算，一个栅格就生成了。
主流网站如何使用栅格系统
1. 电商网站
一起看一下两个主流电商如何使用栅格布局页面，进一步了解栅格系统的使用。
△ 左淘宝、右京东
2. 淘宝布局
下图包含：完整内容展示布局、浏览器缩小时内容展示布局。
淘宝布局分为4列内容：1、2、3、4，在浏览器缩小的情况下，内容3被隐藏。
栅格布局
· 完整内容展示布局：网页总宽度为1200，列数为24，水槽为10；
· 浏览器缩小时内容展示布局：总宽度为990，列数为20，水槽为10。
在浏览器缩小时的栅格布局里，隐藏4列，内容2宽度变窄占10列，其他内容不变。
栅格布局设定后，可以很方便计算出每个模块内容的宽度。
栅格的列数，根据具体内容设定。内容模块较多，建议等分列数多一些，容易布局；如果内容模块较少，等分列数也可以少一些，就像淘宝可以等分成24列，也可以等分成12列。
栅格布局设定为12列，每个模块内容的宽度和上面等分成24列的宽一样。
2. 京东布局
下图包含：完整内容展示布局、浏览器缩小时内容展示布局。
京东布局和淘宝布局一样分为4列内容：1、2、3、4，在浏览器缩小的情况下，内容3被隐藏。
栅格布局
· 完整内容展示布局：网页总宽度为1200，列数为24，水槽为10；
· 浏览器缩小时内容展示布局：总宽度为990，列数为20，水槽为10。
在浏览器缩小时的栅格布局里，隐藏4列，其他内容不变。
京东栅格布局，每个模块内容的宽度如下图。
再来强调一下：栅格的列数，根据具体内容设定。京东网页等分成24列，也可以等分成12列。
栅格布局设定为12列，每个模块内容的宽度和上面等分成24列的宽一样。
总结：如何用栅格系统布局页面
第一步：确定页面宽度，比如1920、1800、1600、1366、1280等等。
第二步：分析内容等分的复杂度，如果内容简单只需要3、4等分，12列的栅格系统即可。如果有较多不等分的可能，建议采用24列的栅格系统，可灵活设置。
第三步：根据内容布局页面，确定模块之间是否有「间隔」，间隔尺寸是多少，6px、8px、10px、12px和20px选一个方便计算、方便记忆和整除的数值即可。
就像过去，开发人员发现960px是最适合作为网格布局的宽度，因为960可以整除3，4，5，6，8，10，12，15，是不是突然发现设计其实是一道数学题。
来源：千锋UI设计