分享响应式CSS栅格系统

　　栅格系统这种东西和许多同类工具/素材一样，“系统”二字让它看起来无比高大上，而实际上大多数的栅格系统只是一系列纵横交错的细线构成。很简单?看起来确实如此。不过它之所以被冠以“系统”二字，主要还是因为这些线条所涉及的内容管理方式、梳理页面结构的功能。栅格系统的运用会促使你的网页内容逐步走向规则化，实现一致性的设计。下面的20款CSS栅格可以更好地运用到网页开发实践中去，赋予你的网站以调理性。

　　1. ChewingGrid

　　ChewingGrid 是一款卡片列表风的CSS栅格，通常可以用于视频、磁贴、文本等各种类型的网页元素。在使用ChewingGrid的时候无需媒体查询，你需要控制的是列的数量，最大和最小宽度。设定的时候可以直接使用默认的栅格，也可以自定义。

　　2. Motherplate

　　Mother plate 是一款基于HTML5、CSS3和SCSS的响应式模板，它不包含视觉组件，仅在CSS中帮你控制一切。

　　3. Lemonade

　　Lemonade 是一款简单灵活且易于定制的栅格系统，它是为设计师和开发者而设计的，便于他们定制属于自己的新项目。目前这套栅格系统兼容Chrome、Firefox、Safari、Opera和IE9+。其中预制了12栏，当然你可以定制并增加更多。

　　4. Reverie

　　Reverie 框架是一款基于ZUBR Foundation 的强大的HTML5 WordPress 框架。ZUBR Foundation 是一个强大的原型工具，以它为基础来制作框架自然不会差，而Reverie 本身确实从中继承了不少强大的功能。

　　5. Jeet

　　Jeet 是一款市面上相对先进、设计直观的.栅格系统，你可以将它视作为Semantic.gs 的理念继承者。借助强大的预处理功能，你可有使用真正意义上的百分比来设计栅格系统，这也意味着你可以按照客户的描述直观快速地设定栅格，没有严格的12列栅格的限制，你可以更加快速的设计，使用更少的代码来搞定一切。

　　6. 1KB Grid

　　1KB Grid的设计灵感来自于1KB CSS栅格系统，这套基于SASS的栅格系统移除了HTML中多余的类，让它更灵活也更加易于定制。当然，1KB Grid 并非严格意义上的1KB大小，新版的1KB Grid已经可以制作流动性更强的栅格。

　　7. Unsemantic

　　Unsemantic 是一款流态栅格系统，基于960栅格系统演化而来。它们的工作原理很接近，但是Unsemantic 更加灵活，可以基于百分比来设定。

　　8. Bourbon Neat

　　Neat 是一款在Sass和Bourbon的基础上建立的语义栅格系统。它足够简单又功能强大，能在几分钟内配置好运行起来，足以应付任何响应式布局。

　　9. Herow

　　Herow 是一款省时省力的栅格系统，内置混入组件易于定制，可以处理各种各样的响应式的问题，并且能够和CSS轻松联动。

【分享响应式CSS栅格系统】相关文章：

响应式网页设计10-03

响应式网站布局设计10-04

响应式网页设计技巧10-02