网页设计分格线 第1篇
最小单位是需要优先定好的，因为后面的所有规则都基于它来制定。
下图就是在sketch设置栅格大小的页面：
如果你用sketch却不知道上面这个界面是哪里调出来了，请出门左拐去百度一下！
这里再简单介绍一下：pc端常用最小单位是10，移动端常用最小单位是3、4、5，不过这些也不是固定的，还是那句话，能解决工作上的实际问题就是正确的。
网页设计分格线 第2篇
简单明了，直接根据站点内容分几块
例如1：站酷
所有内容都在版心1083px内。以10px倍数为间距，每个模块250px。
例如2：echo回声
所有内容都在版心1000px内。以15px的倍数为间距。
实际上，web必须呈现任何浏览器的宽度。例如，有一个大显示器，它可以看到1600像素宽的东西，实际上pc端的网页设计是1200px宽，平板电脑上是768px宽，手机是360px宽。所以你会看到一个小于1200px的设计，有大量的留白。但是当你的浏览器再小一个像素，1199px，会发生什么呢？
如果开发那边写了一个固定栅格，当你从桌面缩小到平板电脑，就像是在900px的浏览器宽度时，你不会看到任何变化，设计就像是被剪掉了一样。
但当达到768px临界点时，设计马上就会改变，平板电脑上的显示效果就会好起来。如果继续减小这个值，同样的事情也会发生，在到达另一个临界值之前，设计看起来都是不变的。
流动网格的示例
现在来看看流动网格的特点，当窗口缩小时，内容将动态的发生变化，文本会进行换行，元素也会变窄。然而，这些元素在内容宽度缩小到下一个临界值之前，布局是不会变化的。
所以我想说的是，设计的临界值只是一个更改布局的参考点。这就是为什么列宽和水槽在网格中不会改变的原因，因为我们想让设计师在考虑布局时能够更容易地创建一致性。
在实际项目中，使用流动网格和固定网格的组合也是常见的做法。网站通常是流动网格，因为它要去适应各种不同终端的大小。
打破栅格的设计并不容易实现，因为控制不好常常会让整个设计陷入混乱。
如何在加入奇思妙想的同时还不会破坏整个项目？多练习总是没有错的。
PS中参考线，使用网格系统，让你的设计具有正式感和规范感，还具有一种结构分明的设计感。这让你设计起来更轻松，对于开发者来说，同样如此。
网格系统起源于传统的印刷设计，在印刷介质中，网格系统的辅助作用很强，为印刷而做的网格系统也十分简单。通常在InDesign中就可以完成。不过也可以在AI中建立网格开始设计。在InDesign中新建文档的时候会跳出一个对话框，对话框里有十分丰富的选项哟。
像往常一样新建一个ID文件，但是要改变其中几个关键的设置，就可以建立一个多列的网格。默认的单位是像素，也可以改成英寸、厘米或者其他会让你感觉更舒服的单位，你可以根据你的喜好改变InDesign的度量单位。
在初始的设置菜单中，改变列数就会让网格系统的布局发生改变。有些设计师很喜欢5列网格，有些设计师则有不同的看法。“Gutter”即每列之间的留白空间，应该尽可能地多留，但是也不能留太多，根据内容来调节。
页边距是内容周围的留白空间，我想大家都不希望印刷出来的成品文字都被裁掉吧？所以记得留出足够的页边距。
在Illustrator中，创建网格的过程有一点小小的不同。不是在创建文件的时候来创建网格，而是在创建新的文件之后，选择文字工具，然后创建一个文本框，这种方法独特的地方在于你要先确定页边距，然后再把文本框放进精心设置的网格系统中。
然后在顶部的菜单中找到“类型”，然后选择“区域类型选项”。这里将会出现一个对话框，这个对话框和之前在InDesign中看到的十分类似，只有几个不同之处，比如可以沿着分栏新建一行之类的功能。
所以，你可以用这个工具做垂直、水平或是混合在一起的网格系统。在这里一样要对于“Gutter”设置保持高度关注。
在AI中，你可以通过预览来检查刚刚创建的网格，这个功能真是超级有用呢！在“选项”菜单中，你可以决定文本框里的文字是水平的还是垂直的，由此产生的设置如下图所示，大家可以感受一下。
在 Axure RP 任何一个页面中进行右键，就可以找到。
网格的详细设置
创建全局参考线：如果勾选上了，则创建该文件内的所有页面都会辅助线，如果没有勾选上则只创建当前页面有参考线；而且，辅助线的颜色也不一样。
在你的设计中使用网格可以让你更有逻辑地进行你的设计工作，并且网格系统可以更好地组织画面中的信息，让重要的元素更加鲜明，让设计稿有更好的结构，带来更好的体验。
设计师的工作说白了是尽可能更有创意地传递信息，网格系统是让信息更具条理的方式之一，但我们不一定非得100%完全遵循网格的分栏进行设计，我们也要适时打破网格系统，这也是创建视觉兴趣点的好方法！
网页设计分格线 第3篇
假设W=1200,i=10(10的倍数),n=12W=(a+i)*n-i1200+10=(a+10)*12a约等于90所以W=(90+10)*12-10=1190所以这种等分方式是最接近1200屏幕需求例如：淘宝，天猫，京东W=(90+10)*12-10=1190
1180版心：W=1180,i=20(10的倍数),n=12，a=80W=(80+20)*12-20=1180例如：UI中国