网格是基本的设计原则之一，不管你用什么样的工具。网格设计也可以用在很多地方，不管是网站设计还是杂志、海报设计，在我们常用的设计软件Illustrator和Photoshop中同样支持网格设计。

比如我们要设计一个三折页。

然后我们可以通过参考线设置好边距和分栏之间的距离。

再进一步标出版心位置。

最后我们就可以对该版面的进行网格设计了。

当然，我们也可以通过另外一种手段来实现对网格布局的设计。

我想，现在你应该对网格布局有一定的了解了，但是还可以更复杂，当然也会更强大。

 

比如通过下面的这个小图表也可以发现网格的存在，实际上，这是通过网格计算的出来的列和行的宽度。举例来说，| ~ | ~ | ~ |将是一个三列的网格。

如果我们展开观察，在本例中，文档的页边距和装订线是40个像素，则该图标的宽度为60个像素，该段之间的空间为10个像素，并且列的宽度是未知的，但应当是彼此相等。这可以在像这样的网格符号来表示：

| 40px | 60px | 10px | ~ | 40px | 60px | 10px | ~ | 40px | 60px | 10px | ~ | 40px |

网格加起来有一个明确的值，并减去从可用空间的宽度的命令。然后它将该通配符之间剩余的区域。其结果将是这样的：

我们可以用到更美的数学方式来设计网格。

黄金比率

黄金比例是0.618，黄金比例用百分比表示是38.2%和61.8%。所以，如果输入38.2%的宽度，那么这个分栏就是黄金比例的。

斐波那契序列

后者是前面两个数字之和，并且在100％的斐波值为1％，1％，2％，3％，5％，8％，13％，21％，34％，55％，89 ％。虽然这看起来非常简单，我们必须进行调整，以使网格看上去是准确的。通过调整后，斐波那契数网格的比例将是：

| 1% | 1% | 1% | 2% | 3% | 5% | 8% | 13% | 21% | 34% | ( vl )

 

如果觉得每次设置太麻烦，我们可以存为模板，你可以试试看。