使用GridGuide自动化网格设计过程
任何网站设计的第一步都是挑选一个网格。 这通常定义页面的最大宽度以及将使用多少内部列和装订线来划分布局。
您可以尝试构建自己的工具，但是完成这项工作的最佳工具是GridGuide 。 这是一个完全免费的Web应用程序，可以完全自动化任何网站的网格生成，而无论其大小如何 。
另请阅读： 10个最迷人的jQuery网格
只需输入所需的最大宽度，然后输入所需的列数即可。 通常，这两个数字应可整除，因此最好避免使用质数。 以下是一些常见的网站最大宽度：
- 1100px x 12列
- 1200px x 8/12列
- 1240px x 8/12列
- 1440px x 8/10/12列
- 1600px x 8/10/12列
这里绝对没有错误的答案。 您可以选择任何宽度，只要它能被列数均匀地整除，就可以了。
GridGuide是一个快速的Web应用程序，因此一旦您在输入字段中输入值，它便会自动更新。 因此，当您调整顶部的数字时，您会注意到网格预览会自动更改 。
我曾经依靠Photoshop来完成这项工作，这让我望尘莫及。 老实说，创建网格是设计新网站时最令人沮丧的步骤之一，而获得完美像素的数字可能会令人发指。
但是GridGuide是完全自动化的，它根据不同的列大小和装订线宽度为您提供了许多不同的网格选项。
您甚至可以下载选择导入到Photoshop的网格的完整PNG图像 。 这将节省大量时间，因此您无需从头开始使用形状工具重新创建网格。
而且，如果您喜欢某种网格样式，则可以生成一个共享链接，以添加书签以供以后使用或与网络上的其他人共享。
对于完全免费且易于使用的工具，这是每位Web设计人员的最佳建议。 如果您在网格上苦苦挣扎，又讨厌自己设计网格，那么GridGuide是工具箱中的必备资源。
另请阅读： 将简单CSS网格布局集成到WordPress中