在 GenerateBlocks 裡，三欄內容不用分別重做三次。先完成第一欄，再製成需要的內容項目，最後把 Grid 的 LAYOUT 切成三欄，就能排出三欄特色區。
我們用好喝咖啡的首頁示範，排一排「三大特色」：嚴選莊園豆、職人手沖、掛耳宅配。這篇不需要任何基礎，頁面上有沒有內容都不影響。
快速重點
| 製作需求 | 在哪裡做 |
|---|---|
| 換欄數 | 選網格，側欄 LAYOUT 的版型小圖 |
| 複製一整欄 | 清單檢視點 Container，列上的三個點 → 再製 |
| 調欄與欄的距離 | 網格的樣式分頁 → Layout → GRID LAYOUT |
做法是先做好一欄，再複製成三欄。比三欄各做一次快，也保證三欄的結構一模一樣。
起點長這樣，頁面上已經有一區營業資訊。你的頁面長什麼樣都可以，我們要加的東西在最下面。
1.插入一個網格
點左上角藍色的「＋」，搜尋框打 grid，點網格 Grid。它會加在頁面最下面。
2.網格進來了，預設兩欄
新的網格自帶兩個空容器，一人一欄。
3.把第一欄做好
點進左邊的容器，放一個標題打「嚴選莊園豆」，再放一個文字打一句說明。做法跟排店名、放營業資訊完全一樣，忘記的話文末有相關教學。
4.用清單檢視選容器，按「再製」
開左上角的清單檢視，點特色網格下面的第一個 Container。在清單裡選，選到的一定是整個容器，不會誤點到裡面的文字。
點那一列右邊的三個點，按「再製」。按完選單會收起來，對著新複本那一列再做一次，湊滿三個。
再製完會變四個欄位，三個一樣的內容，加上原本就空著的那個。版面還是兩欄，放不下的掉到第二排，看起來亂亂的沒關係，下一步就收乾淨。
5.選網格，切成三欄
點網格本體，側欄的 LAYOUT 是一排版型小圖，目前亮著的是兩格的。點三格的那個。
6.收尾：刪空欄、改文字
版面變三欄了。把多出來的那個空容器點起來，用剛才同一個選單裡的「刪除」收掉。再把第二、三欄的字改成自己的，我們改成「職人手沖」和「掛耳宅配」。
7.欄距想調，去 GRID LAYOUT
覺得欄與欄太擠或太鬆，選網格，切到側欄的樣式分頁（半圓那個圖示），Layout 面板裡點開 GRID LAYOUT。橫向的欄距是 Column Gap，示範畫面目前是 1em，想鬆一點改 2em；直向的間距是旁邊的 Row Gap。
8.用清單檢視收工
開左上角的清單檢視對一下結構，網格底下三個容器，每個容器各有一個標題和一個文字，這樣就對了。
常見問題
欄數還能再多嗎？
可以。網格側欄的 LAYOUT 有一欄到四欄的現成版型，點一下就切換。要更多欄或客製比例，在樣式分頁的 GRID LAYOUT 自己設。欄越多每欄越窄，桌機排到四欄差不多是極限，再多內容就不好閱讀。
再製出來的欄位，改字會互相影響嗎？
不會。再製出來的是獨立複本，改哪一欄就只動那一欄。這正是先做好一欄再複製的好處，樣式和結構帶著走，內容可以各自獨立。
欄與欄的距離多少比較好看？
沒有固定標準。可以從示範畫面的 1em 開始，覺得太擠再往上調。原則是欄距要明顯小於區塊和區塊之間的距離，看的人才分得出哪些內容是同一組。
下一步
用這個做法，看要排幾欄都可以。四欄的服務項目、兩欄的左圖右文，都是做好一欄、再製、切版型三個動作。
還沒排過版面的話，可以從認識容器、網格、標題開始：WordPress 網頁怎麼排版？放文字和圖片的做法在這篇：WordPress 網頁怎麼放文字和圖片？。
照著做如果畫面跟這裡不一樣，或者不確定版面該怎麼安排、想連整個網站外包給我們製作，歡迎與我們聯絡。