栅格系统

随着响应式网页设计地遍地开花，栅格系统布局已经成为了一种必然选择。为了固定大小并使设计风格统一，我们通常使用网格来给元素布局。为了避免反复地布局工作，一些非凡的想法认为应该使它们保持可复用性。 还是长话短说吧：我并非栅格系统的拥趸。当然我确实看到了它的潜力，但大多的是矫枉过正，而且主要是被设计师用来绘制红栏白底的原型。你还记得上一次有 _thank-God-I-have-this-tool-to-build-this-2-5-3.1-π-grid_ 如此赞叹的时间吗？那就对了，从来没有过。因为在多数情况下，你只是想使用12列栅格布局，毫不奇特。 如果你正在项目中使用类似 [Bootstrap](http://getbootstrap.com/) 和 [Foundation](http://foundation.zurb.com/) 的 CSS 框架，我建议善用它们来避免额外的依赖，因为此时它们很有可能就包含了一套栅格系统，。 如果你尚未依赖于特定的栅格系统，那么也许会乐意了解这里介绍的两个由 Sass 支持的栅格引擎：[Susy](http://susy.oddbird.net/) 和 [Singularity](http://singularity.gs/)。它们都可以满足你的需求，所以只需从中挑选喜欢的一个来用即可并且可以放心即使是你的苛刻需求—哪怕是最多变的—也可以被实现。 或者你可以处理地更轻松些，就像使用 [CSSWizardry Grids](https://github.com/csswizardry/csswizardry-grids) 的感觉。总而言之，任何选择都不会对你的代码风格有过多影响，所以这一点上一切取决于你。 ###### 扩展阅读 * [Singularity](http://singularity.gs/) * [Singularity: Grids Without Limits](http://fourword.fourkitchens.com/article/singularity-grids-without-limits) * [Singularity Grid System](http://www.mediacurrent.com/blog/singularity-grid-system) * [Susy](http://susy.oddbird.net/) * [Build Web Layouts Easily with Susy](http://css-tricks.com/build-web-layouts-easily-susy/) * [A Complete Tutorial to Susy 2](http://www.zell-weekeat.com/susy2-tutorial/) * [Sass Grids: From Neat to Susy](http://www.sitepoint.com/sass-grids-neat-susy/) * [Bootstrap’s Grid System vs Susy: a Comparison](http://www.sitepoint.com/bootstraps-grid-system-vs-susy-comparison/) * [How to Use Susy: Superpowered Sass Grids](http://webdesign.tutsplus.com/tutorials/how-to-use-susy-superpowered-sass-grids--cms-22744) * [A Creative Grid System with Sass and calc()](http://www.sitepoint.com/creative-grid-system-sass-calc/)