在进行CSS设计编码市，如果没有良好的工具每次都自己写一大推代码不仅费时而且费力。因此有一个好的工具，可以帮助开发者简化设计过程，大大提高工作效率，

在这篇文章中我分享一些专注于CSS网格和预建的CSS网格模板系统。这些网格系统都是实用易用的，平常在我设计网站时总是使用这些网格。如果你使用过其中一种，你可以尝试下面的其他几种

 

960 Grid System为了简化Web开发工作流程提供了常用的尺寸，使用它能有效的简化美工的操作。

 

grid system generator允许你创建自定义网格系统。

 

一个漂亮的用户界面和工具，Tiny Fluid Grid附带一个index.html演示代码，包含CSS所创建的网格代码。

 

 

CSS 框架逐渐变得流行，其中的一些，如 BluePrints, YUI, YAML 等想去实现所有的东西，如网格系统，样式重置，基本板式，表单样式，其他的仅仅关注网格，但是还是显得臃肿，最后加上复杂性，这样只会使学习曲线变得陡峭，和增加开发时间，以及无穷的调试。所以如果你仅仅需要一个轻量级的 CSS 网格系统，来构建你网站的主框架，那么你可以尝试下 。1KB CSS Grid 网站上提供了一个生成器用来定制 CSS 网格，并且可以直接下载定制好的 CSS 网格。

 

Grid Generator允许你指定列的宽度和装订线宽度等常用的参数来设计自己的网格。

允许你建立你自己的网格，通过指定列的宽度和列数。

 

设计人员和开发人员的一个简单的 CSS框架  特点：在35个等宽列的基础上创建。目的是减少开发时间，帮助您创建美丽结构的网站。

 

Masonry是 一款非常强大的jQuery动态网格布局插件，可以帮助开发人员快速开发类似剪贴画的界面效果。和CSS中float的效果不太一样的地方在 于，float先水平排列，然后再垂直排列，使用Masonry则垂直排列元素，然后将下一个元素放置到网格中的下一个开发区域。这种效果可以最小化处理 不同高度的元素在垂直方向的间隙。

 

hide