Grid-Guide自动生成的栅格系统（宽950-12列）
从图中可以看出，这三种方案列宽column width和间距gutter不同，剩下的工作对于ui设计师来说就简单了很多，你可以把版式规范的png格式下载下来，作为你网页设计的基础版块，在此基础上进行列的划分 。 或者只是以这个参数为基础，重新建立参考线（我更推荐这种方式，尤其photoshop cc2017的新建参考线版面，装订线对应Gutter，列宽对应column width） 。 我简单的拿版式规范做了个页面设计示意图，这就是基于栅格系统设计的优点，在划分列时，有理可依，有据可循 。
【基于960grid系统的版块划分示意】
当然，既然是设计师，就可以感性的元素再多一些 。 比如，你希望更多的留白，就可以采用间距值较大的栅格版式，只要整个网站保持一个统一的版式即可 。 下图是当内容宽度为1200时生成的栅格系统，你还可以尝试很多方案，但Max Width的设定并不是那么随意，这个取决于网站的定位 。
Grid-Guide自动生成的宽1180的栅格系统（24列）
至于高度和垂直间距，栅格化系统并没有统一的准则，设计师可以采用一些黄金分割之类满满的都是设计感之类的值，或者垂直间距与栅格系统的间距相同或是整倍，总之，也需要一个规范指导全站设计 。
栅格系统的参数根据项目的实际情况，尽量建立10的倍数或8的倍数（google material design推荐） 。
4.栅格化布局的参数
在前面提到过，如果网站的需求是响应式的设计，这时，设计师们一定一定先问一下前端他们准备如何实现响应式布局，而不是把设计稿完成后交给他们后YY他们能百分百给你复现你的设计稿 。
关于响应式的栅格系统，首先声明一点，当前端乐意并了解css原理和框架的构建方式时，可以构建其他样式的网格，比如7、9、11、13等等，甚至各种异形网格，但在绝大多数情况下，更多的前端攻城狮青睐于高（tou）效(lan)，而他们常用的css框架除了Bootstrap(宽480/768/992/1200,12列)，还有一堆叫不出名字的轻量css框架（毕竟栅格系统只是Bootstrap的一部分，如果只是需要一个响应式的css的话，可选的非常多，比如960.gis），除此之外，有可能你那可爱的前端攻城狮用的是flexbox实现响应式弹性布局，所以在一切未知确定下来之前，请放下架子，请教一下开发人员，因为虽然不想承认，但这种情况下是前端来指导设计 。 值得庆幸的是，这种情况在现实中非常少的，（但不排除你接手的是一个二次开发的项目等等之类），确定他们使用哪种框架之后，设计师可以开始自己的工作了 。
下面也举个例子，是960gis的 。


【960-grid-system栅格化布局】
看完你也许会明白为什么涉及到栅格化布局需要前端来确定了，960gis的css框架给出了三种方案，24列16列12列，设计师要在这个基础上进行设计 。 一旦需要栅格化布局，意味着设计师自由发挥的空间再次缩减，只有在这三个方案上选一种 。 这些方案从何而来呢？很简单，你只要向前端索取他使用的框架的psd模板即可，里面参考线都是建好的 。 而前端一定会非常乐意帮你这个忙，理由很简单，你按照他使用的框架规范进行设计也是在一定程度上缩减他的工作量，皆大欢喜 。 比如下面这张，就是目前最新的Bootstrap4的psd文件的截图 。
【Bootstrap4】
设计师也可以自给自足，一般这些css框架库都会提供下载途径 。 尤其是Bootstrap，作为成熟的框架，很多模板文件可以套用 。 栅格化布局以使用的css框架库为准则，让前端开发提供给设计师再好不过 。
1、网站设计及基本框架结构

• 《天猫市场管理规范》节点违规怎么处理？要注意什么？
• 幼儿观察记录与分析万能模板-幼儿观察记录评价模板
• 结婚资料复印模板 惠普打印机怎么复印结婚证
• 淘宝装修模板怎么用？无线店铺装修流程是怎样的？
• 松狮狗能長多少？松狮狗规范身高与体重
• 论文格式要求标准模板 论文格式与标准范文
• 阿拉斯加犬幼狗喂养规范是啥？阿拉斯加犬幼狗喂养
• 简单的产品说明书模板 产品说明书模板材质
• 邮件简历正文模板 应聘邮件正文简略版怎么写
• 天猫送货上门收费吗？服务规范是什么？