隨著響應(yīng)式網(wǎng)頁設(shè)計地遍地開花，柵格系統(tǒng)布局已經(jīng)成為了一種必然選擇。為了固定大小并使設(shè)計風(fēng)格統(tǒng)一，我們通常使用網(wǎng)格來給元素布局。為了避免反復(fù)地布局工作，一些非凡的想法認(rèn)為應(yīng)該使它們保持可復(fù)用性。

還是長話短說吧：我并非柵格系統(tǒng)的擁躉。當(dāng)然我確實看到了它的潛力，但大多的是矯枉過正，而且主要是被設(shè)計師用來繪制紅欄白底的原型。你還記得上一次有?thank-God-I-have-this-tool-to-build-this-2-5-3.1-π-grid?如此贊嘆的時間嗎？那就對了，從來沒有過。因為在多數(shù)情況下，你只是想使用12列柵格布局，毫不奇特。

如果你正在項目中使用類似?Bootstrap?和?Foundation?的 CSS 框架，我建議善用它們來避免額外的依賴，因為此時它們很有可能就包含了一套柵格系統(tǒng)，。

如果你尚未依賴于特定的柵格系統(tǒng)，那么也許會樂意了解這里介紹的兩個由 Sass 支持的柵格引擎：Susy?和?Singularity。它們都可以滿足你的需求，所以只需從中挑選喜歡的一個來用即可并且可以放心即使是你的苛刻需求—哪怕是最多變的—也可以被實現(xiàn)。

或者你可以處理地更輕松些，就像使用?CSSWizardry Grids?的感覺?？偠灾魏芜x擇都不會對你的代碼風(fēng)格有過多影響，所以這一點上一切取決于你。

擴(kuò)展閱讀

• Singularity
• Singularity: Grids Without Limits
• Singularity Grid System
• Susy
• Build Web Layouts Easily with Susy
• A Complete Tutorial to Susy 2
• Sass Grids: From Neat to Susy
• Bootstrap’s Grid System vs Susy: a Comparison
• How to Use Susy: Superpowered Sass Grids
• A Creative Grid System with Sass and calc()