前置作業

首先，請先參考「使用Zen建立自己的Theme資料夾」，在外觀中安裝好 Zen 並依照步驟設定自己要使用的 Theme。

建立好後，進入你剛剛建立的 Theme ，在sass資料夾裡面你會看到 init 跟 layouts 這兩個資料夾！

init資料夾：_variables.scss是我們主要設定breakpoint跟grid的地方
layouts資料夾：layout-3col、layout-center、layout-swap，這次的重點主要在layout-3col與layout-center

請記住～這是之後在設定 layout 時會使用到的兩個重點位置。那就正篇開始摟～

步驟一、觀察網頁的內容佈局

拿到設計圖的當下，先觀察每個頁面的區塊組成。請看下圖：

首頁：不算上方的Banner部分，很明顯的底下這四個區塊都是滿版
列表跟內頁：請看紅框部分內容，會發現內容整體的最大寬度是相同的

請先看 theme/zen/templates 中的 page.tpl.php，這是zen的基本網頁架構，你會看到內容全部被包覆在 layout-center 這個Div中。把樣式寫在.layout-center上，全部頁面都會吃到相同設定，就把列表跟內頁的內容寬度設定給完成了！

所以當看你完所有的設計圖時，就會清楚知道有哪些區塊是需要拉出來另外規劃的摟！當然你會想問，首頁是滿版不能跟其它頁一樣吃相同的 layout-center 設定耶？不要急，下一步驟就為你解惑。

步驟二、設定網頁breakpoint

到這相信你已經看完了全部設計的內容佈局，接下來要來設定你的網頁breakpoint嘍～這對於響應式網站來說是非常重要的設定唷～設計圖一般常見的寬度有320、480、768、1200、1440、1920的設計圖，請你看看你拿到的設計圖是有哪些尺寸的。

舉例來說，我們現在有480、768跟1200以上的設計圖，下一步就是到 init/_variables.scss 中來做設定摟：在檔案中你會看到已經預設好的 breakpoint。

這邊就是設定當網頁寬度來到1222px的時候新增一個名字叫xxxl的斷點。那我們就依照它的規則來新增我們需要的 breakpoint，像是下圖：

路徑：你的theme/sass/init/_variables.scss

所以當我們在寫樣式的時候，就能這樣寫。記住唷mobile first的概念，所以尺寸都是以上來看，例如：mobile(也就是320寬)以上時要padding: 0 30px;

步驟三、基本格線設定

外圍處理好了，接下來就是裡面的東西囉！接續上一個步驟，設定完 add-breakpoint 後，往下拉你會看到下圖：

路徑：你的theme/sass/init/_variables.scss

$zen-columns：控制網站內容區塊總共有幾欄(只算內容區塊的欄數) $zen-gutters：控制欄的左右兩側的間距總共多寬，也就是說左右各10px

這邊的意思是，初始值就是將內容的欄數設為1，在沒有breakpoint設定的情況下就是吃此設定。所以當我們有breakpoint時，就需要針對不同breakpoint設定不同的 columns 數。依照上述解釋會知道在這三個尺寸時要怎麼設定：

480寬 $zen-columns：5 ; $zen-gutters：10
768寬 $zen-columns：8 ; $zen-gutters：10
1200寬 $zen-columns：12 ; $zen-gutters：10

接下來！初始值也設定好了，其它三個 breakpoint 也在上面計算好了，請在同一隻檔案往下滑找到下圖，爽快地把三個 breakpoint 的 columns 設定寫上去吧～

到這邊以前的步驟都只是設定唷～接下來才是重頭戲，要拿這些設定來劃分我們的區塊寬度唷～

步驟四、設定layout-3col

接著來到設定各尺寸不同區塊寬度的部分囉！

這個檔案主要是設定的是網頁的內容佔據多少欄數～點開檔案後就能看到zen已經先幫我們設定好的東西。

路徑：你的theme/sass/layouts/layout-3col/_layout-3col.scss

這部分就是初始值設定，以下簡單說明

full是網頁滿版時會出現的class&__full left-content是網站內容在左側&__left-content right-sidebar是右側欄&__right-sidebar right-content是網站內容在右&__right-content left-sidebar是左側欄&__left-sidebar content跟sidebar會一起出現

left-content、&__right-content、&__full會出現在<main>的class上面

&__right-sidebar、&__left-sidebar會出現在<aside>的class上面

@include zen-grid-item(1, 1);這就是各個區塊的欄數初始值唷，記得我們在「步驟三、基本格線設定」設定的初始值嗎？(1, 1)右邊的數字代表是從左邊1個開始，左邊的數字是開始算幾個。所以在進入480寬度前，內容的總欄數是1，從第一個開始算一個的欄數。

初始值設定之後，以下開始設定各個 breakpoint 的欄數

以480、768跟1200寬度的設計圖來看，以480跟1200設定來舉例～來回憶一下「這兩個尺寸的設計圖」跟「步驟三、基本格線設定」中設定好的columns跟gutters。

480寬 $zen-columns：5 ; $zen-gutters：10
768寬 $zen-columns：8 ; $zen-gutters：10
1200寬 $zen-columns：12 ; $zen-gutters：10

提醒：還記得我們 breakpoint 的名稱設定嗎？480(mobile)、768(pad)、1200(laptop)

480寬的設定，記得看圖 & columns跟gutters設定

在 laptop 這個斷點的時候，全部區塊都是滿版

@include zen-respond-to(mobile) {
    // 滿版的時候是5欄數
    &__full{
        @include zen-new-row(both);
        @include zen-grid-item(5, 1);
    }
    
    // 左側欄
    &__left-sidebar {
      @include zen-new-row(none);
      @include zen-grid-item(5, 1);
    }
    
    // 右邊內容

    &__right-content {
      @include zen-grid-item(5, 1, right);
      @include zen-new-row(none);
    }
    
    // 左邊內容
    &__left-content {
      @include zen-grid-item(5, 1);
    }
    
    // 右側欄
    &__right-sidebar {
      @include zen-new-row(right);
      @include zen-grid-item(5, 1, right);
    }
}

1200寬的設定，記得看圖 & columns跟gutters設定

在 laptop 這個斷點的時候full的部分是滿版
有左/右側欄的時候，左/右側欄佔據3欄、內容佔8欄

@include zen-respond-to(laptop) {
    // 滿版的時候是12欄數
    &__full{
        @include zen-new-row(both);
        @include zen-grid-item(12, 1);
    }
    
    // 左側欄
    // 從左邊有內容的第一個欄數開始算3欄，
    &__left-sidebar {
      @include zen-new-row(none);
      @include zen-grid-item(3, 1);
    }
    
    // 右邊內容
    // 從右邊有內容的第一個欄數開始算8個
    &__right-content {
      @include zen-grid-item(8, 1, right);
      @include zen-new-row(none);
    }
    
    // 左邊內容
    // 從左邊有內容的第一個欄數開始算8欄，
    &__left-content {
      @include zen-grid-item(8, 1);
    }
    
    // 右側欄
    // 從右邊有內容的第一個欄數開始算3個
    &__right-sidebar {
      @include zen-new-row(right);
      @include zen-grid-item(3, 1, right);
    }
}

@include zen-grid-item(4, 1, right); 這個設定的是佔據幾(4)欄,從第幾(1)欄開始,從哪(right)邊開始算起

@include zen-new-row(both); 這個則是設定clear的位置！

步驟五、設定內容最大寬度

最後，記得設定內容的最大寬度唷～

我們現在有480、768跟1200以上的設計圖。看1200寬內容最大寬度是800寬，那我們就知道1200以上時，內容寬度要限制最大寬度（因為mobile first）。

在第一步驟時，就知道內容是被包覆在 layout-center 中，所以就在 layout-center/_layout-center.scss 設定寬度唷～這部分有$zen-gutters主要是因為我們看到的是內容的寬度，假如我們的內容包含左側欄，若是不加，左側欄跟右邊內容區塊是會超出我們的最大寬度的（這部分就請各位自己去嘗試摟）。

路徑：你的theme/sass/layouts/layout-center/_layout-center.scss

知道你想問！首頁是各自區塊滿版，但共用 layout-center 怎麼辦？

沒錯，問得好！你可以從首頁的<body>上面找到front這個class，這是只有首頁才會有的class。可以參考以下的寫法，讓首頁的layout-center不受限制。當然還有其他辦法，但在這就不詳述了。

body.front {
  >.layout-center {
    margin: 0 auto;
    padding: 0px;
    max-width: 100%;
  }
}

結論

簡單五步驟就能輕鬆設定網站layout！

記得每個步驟都是層層相關，先觀察好大尺寸的區塊佈局、設定好網頁所需要的breakpoint，再依據上一部設定的breakpoint來計算每個斷點需要的基本格線數，然後你才知道在哪些breakpoint時，哪些區塊要設定幾個格線，最後別忘記要加上網頁內容的最大限寬。

當然，設定做久了你就會有自己邏輯的一套設定方式，但在你熟悉之前，你可以參考本篇或者是參考Zen的官方文章。

【Drupal教學】Zen Theme的Layout設定