影片教學請點選下圖連結↓

以下文章同步於Github。

這章是要來講使用isolate來設定不對稱的 RWD Grid，
像有些網頁設計師會覺得不希望版型都是死板板固定欄寬，
如果希望是設計左2欄寬、中8欄寬、右2欄寬，總計三欄的Gird，
那就相當適合使用isolate來設計Grid。

程式碼連結
sassmeister-程式碼範例

進入主題
如果我要設定12欄，每欄欄寬都固定對稱的Grid，
設定方式自然就像這樣子：

$susy:(
  columns: 12,
  gutter-position: after,
  column-width: 60px,
  gutters: 1/3,
  debug:(image:true)
)

畫面就會如下：

但如果希望是設計左2欄寬、中8欄寬、右2欄寬，總計三欄的Gird， 就可以這樣子設定：

$susy:(
  columns: (2,8,2),   //數字為欄寬，共3欄
  output: isolate // 預設是float
  gutter-position: after,
  column-width: 60px,
  gutters: 1/3,
  debug:(image:true)
)

畫面就會變成這個樣子：

設計出Grid出來後，
假如你要將自己設計的div排到自己想要的位置上，
也是使用span這個Mixin， 假設我新增一個.at1的DIV，
要讓他寬度一共佔住2、3欄，那就必須這樣寫：

.at1{
  @include span(2 at 2) 
  // 2是佔2欄，at 2是代表這個div會定位到從左數來第二欄位
  //試著改裡面的數值就可了解他所代表的意思
}
//編譯出來的CSS
.at1{
  width: 81.5789473684%;
  float: left;
  margin-left: 18.4210526316%;
  margin-right: -100%;
}
//由於sass map是使用 `output:isolate`的方式來設定，  
//所以grid推移上也變化成這個樣子。

就會變成下圖的樣子：

再來如果你需要在.at1裡面設定左右欄各佔1column div的話，
就必須這樣子寫：

.at1{
  @include span(2 at 2){
    .at2{
      @include span(1 at 1) //佔1欄，at 1定位在第一欄
    }
    .at3{
      @include span(1 at 2) //佔1欄，at 2定位在第二欄
    }
  } 
}
// @span(){@content}，這樣`span`裡面的程式碼就會依照.at1所下的寬度來對應.at2與.at3編譯出來的寬度。

編譯出來就會變成如下圖：

透過這樣的方式，
你就可以設定自己的不對稱版型出來，
然後再藉由susy-breakpoint將自己設定的不對稱 Sass maps帶進去layout裡面，
你就可以靈活地設定不對稱 RWD版型出來了，
這裡也做了一個 不對稱的RWD Grid，提供大家參考與學習。