柵格系統(tǒng)

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

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

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

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

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

擴(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()