网页设计不用栅格 第1篇
栅格宽度是需要栅格设计区域的宽度，不是显示器宽度。
手把手教你做规范--布局规范（栅格）
手把手教你做规范--布局规范（栅格）
举例：假设我们以1920px的屏幕为画板作图、使用24列栅格。设定栏的宽度为32px4（个原子单位），槽的宽度为16px（2个原子单位）。
则栅格宽度W=24列 x 32栏宽 + 23 列x 16槽宽=1136px，其余宽度做自适应处理。
在1920屏宽下如下图所示：
手把手教你做规范--布局规范（栅格）
应用原则：
网页设计不用栅格 第2篇
由于栅格系统最早出现在印刷品中，起到的作用更多就是规范布局。但是在现在的UI设计中，栅格系统的实际用途除了规范我们平时设计稿的布局以外，更重要的原因一切设计稿都是为了与前端开发结合，形成自适应布局。前端css中有个叫Flexbox。
这个网站算是前端第三方的界面框架，开发利用第三方的框架会高效很多。
我们通常定义栅格系统为12个列（根据实际项目需求可能存在不同），栅格布局中的12是1，2，3，4，6的最小公倍数，意思是要实现1等分，2等分，3等分…..而12是最小的数，也是最好的，当然如果分成16列，24列，32列，就需要更多的代码来开发维护项目。
以下图为例，第一行三个模块平分，一个模块就占据4列。第二行2个模块，左边就占了12格的8列，右边就占了4列。
结合实际案例，以我的语雀为例，网页的大框架分为三列：
随着浏览器宽度缩小，整个网页的比例也在发生变化，第二列在不停地缩小。当浏览器宽度缩小到某个特定的数值，第三列消失，只有第一列和第二列。这个就是俗称的自适应。
网页设计不用栅格 第3篇
做界面设计前会先设置一个个尺寸，宽度是固定的，因为内容不定所以高度也是情况而定，使用布局设置，sketch中默认屏幕内容宽度是960，是现在最常用的一个网页宽度。
就是纵向分栏数量，sketch默认分为12列，也可以分为24列，这是网页端的常用分法，移动端一般是6列。
布局设置中间距宽度就是水槽，红色区域宽度就是水槽（间隔），水槽宽度越大，页面留白和呼吸感会更好，反之则更紧凑。水槽可以将内容更规范地区分开来。
题图来自 Unsplash ，基于 CC0 协议。