CSS – SUSY3 – 建立你的欄位系統(4)

上一篇提到架構以後,接著我們開始建立屬於自己習慣的方法。我將 SUSY Map 的部分,使用 container 左右兩側各 1 gutter,欄位兩側沒有 gutter。

我們期望設計 div 欄位寬度的時候可以使用這樣

那麼我們需要這樣子的設計 (當然你可以依照自己期望的樣貌去調整)

但為了讓 mobile, pad, desktop 三種方式都使用這個邏輯,所以我們需要借助 susy-breakpoint 實現

這樣就能輕易使用囉,可以參考官方 Building Grids 的說明。

發表迴響