隨著響應式網頁設計地遍地開花，柵格系統布局已經成為了一種必然選擇。為了固定大小并使設計風格統一，我們通常使用網格來給元素布局。為了避免反復地布局工作，一些非凡的想法認為應該使它們保持可復用性。 還是長話短說吧：我并非柵格系統的擁躉。當然我確實看到了它的潛力，但大多的是矯枉過正，而且主要是被設計師用來繪制紅欄白底的原型。你還記得上一次有?_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/)