第一次用 WordPress 區塊編輯器排版的人，幾乎都卡在同一個地方：明明只是想把標題、文字、按鈕擺在一起統一調間距，卻在「群組」「區段」「Columns 欄位」之間轉來轉去，搞不清楚到底該選哪一個。更麻煩的是，這幾個詞在介面、佈景主題、教學文章裡的用法還不太一致，新手很容易把「群組」當成「區段」，或是用 Columns 硬做出根本不需要欄寬的排版。

WordPress 區塊群組之所以難懂，不是因為功能複雜，而是因為很少有人先把它放回整個編輯器的結構裡看。把這套系統拆成三層來理解，混淆就會消失大半：最底層是單一區塊，中間層是把區塊裝在一起的排版容器（群組、Row、Stack、Columns 都屬於這層），最上層才是構成整個頁面的區段。這篇會把這三層講清楚，並給出「遇到某種排版需求時該選哪一個」的判斷依據。

單一區塊、排版容器、區段，這三層到底差在哪

先給結論：這三者不是同類東西，而是包含關係。單一區塊是最小的內容單位，排版容器負責把好幾個區塊裝在一起並控制它們怎麼排，區段則是頁面上一塊有獨立功能或視覺意義的範圍，通常由一個或多個容器組成。

把它想成搬家打包。單一區塊是一件件物品，例如一段文字、一張圖、一顆按鈕。排版容器是紙箱，你把相關的物品裝進同一個箱子，之後要搬動、貼標籤、決定箱子內東西怎麼放，都對著箱子操作。區段則是房間，例如客廳、廚房，一個房間裡可能擺了好幾個紙箱。

新手最常見的誤會，是把「群組」直接等同於「區段」。實際上群組只是一種容器，它本身不知道自己是頁首、主內容還是頁尾，那是區段層級的概念。理解了這個包含關係，後面所有的選擇問題都會變得單純：你只是在問「這幾件東西要裝進哪一種箱子」。

WordPress 群組區塊是什麼，又能做到哪些事

群組區塊是一個容器，把多個區塊包在裡面，之後可以當成單一單位一起移動、複製，也可以對整個群組套用背景顏色、邊框、內距與最大寬度。這個功能在 WordPress 5.3 版引入，目的就是讓使用者更好地組織頁面結構，不必為了統一一組區塊的外觀而逐塊調整。

群組最大的價值有三個。第一是一起搬動，把標題、說明文字、按鈕群組起來之後，調整位置時只要拖動群組，內部相對關係不會跑掉。第二是統一樣式，例如替一整段教學步驟加上淺色背景與內距，讓它在文章裡形成一個視覺區塊，讀者一眼就知道這幾段是一組的。第三是重複使用，把調好的群組存成區塊樣式（pattern），下次寫新文章時整組叫出來，只改文字就好，這對經常產出格式一致內容的教學站或商品介紹頁特別省時。

要建立群組有兩種做法。一種是先插入空的群組區塊再往裡面加內容，另一種是先把現有的幾個區塊用滑鼠框選或按住 Shift 點選，再從工具列選「組成群組」。後者在重整既有文章時更實用，因為內容已經寫好，只是想把它們收進同一個容器管理。

自 WordPress 6.2 版起，插入群組時編輯器會先問你要哪一種排列方式，選項是 Group、Row、Stack 三選一。這就帶出下一個常被混淆的點：Row 和 Stack 其實不是獨立的東西，而是群組的變化型。

群組、Row、Stack 是同一家人，差別只在排列方向

Row 區塊與 Stack 區塊都是群組區塊的變化型，三者共用同一套容器邏輯，差別只在內部區塊怎麼排。理解這點，就不會再覺得介面上多出來的 Row 和 Stack 是要另外學的新功能。

三者的關係可以這樣記。標準群組（Group）只負責把區塊裝在一起，不強制內部用哪種方向排，預設沿用佈景主題的流向。Row 強制內部區塊水平並排，並且能平均分配間距、設定靠左靠右或置中對齊。Stack 強制內部區塊垂直堆疊，一個壓著一個，同樣可以統一間距與對齊。換句話說，Row 和 Stack 是「已經幫你決定好排列方向的群組」。

更方便的是，這三種型態可以隨時互換。選取群組後，在右側設定欄點上方的圖示，就能在 Group、Row、Stack 之間切換，內容不會掉，只是排列方向改變。所以實務上不用糾結一開始選哪個，先把區塊裝進來，再依排版需要調方向即可。

Row 還有一個對手機顯示很重要的設定，叫做換行（wrap）。打開換行後，當畫面寬度不足以讓所有區塊並排時，它們會自動往下折行，而不是被擠到變形。這正是它跟 Columns 在小螢幕上行為差異的關鍵。

如果想把 Row 或 Stack 拆掉、但保留裡面的區塊，不要直接刪除容器，那會連內容一起刪掉。正確做法是在列表檢視裡選取該容器，點旁邊的三點選單選「取消群組」，內部區塊就會釋放回原本的層級。

Row 跟 Columns 都能左右並排，到底差在哪裡

兩者都能讓區塊左右並排，最關鍵的差別在寬度控制權。Columns 欄位區塊讓你替每一欄指定明確比例，例如左右各半的 50／50，或三等分的 33／33／33，最多可切到六欄；Row 則不替你分配欄寬，而是讓內部區塊依內容自動撐開、平均排列。

這個差別決定了它們各自適合的場景。當你要的是規律、對齊的網格，例如三個並列的方案卡片、商品特色的三格對照、左右兩欄的圖文版面，Columns 比較合適，因為你需要精確掌握每一欄佔多寬。當你要的只是「把幾個小東西擺在同一行」而不在乎精確欄寬，例如一個信封圖示後面接電子郵件地址、一行並排的社群圖示、標題後面跟一顆小按鈕，Row 更省事，因為它不會逼你去設一個其實用不到的欄寬。

小螢幕的表現也不同。Columns 在多數情況下會維持欄狀排列，內容空間被壓縮時容易出現按鈕上下錯位、文字被擠斷的狀況；Row 搭配換行設定則能在空間不足時自動折行，維持元素彼此的對齊關係。許多人在做頁面區塊群組時硬用 Columns 排小元件，結果在手機上版面跑掉，往往就是選錯了容器。

至於 Row 內部單一區塊的寬度，其實還是能微調，只是設定位置不在 Row 本身，而在被包住的個別區塊上。點進 Row 裡的某個區塊，它的寬度會有三種選項：Fit 讓區塊縮到剛好容納內容、Grow 讓區塊撐滿可用空間、Fixed 則指定一個固定寬度。需要的話用這組設定做局部調整，就不必為了一點寬度控制而退回 Columns。

遇到不同排版需求時，這個容器該怎麼選

選容器不必憑感覺，把需求對應到下面幾種情境就有答案。核心判斷只有兩個問題：這些區塊要不要排成某個方向，以及要不要精確控制每塊的寬度。

• 只想統一管理外觀，不在乎排列方向：用標準群組。例如替一段教學步驟加底色與內距，讓它形成獨立視覺區塊，內部維持原本由上而下的閱讀順序就好。
• 要把幾個小元件擺在同一行，不需要精確欄寬：用 Row。例如圖示加文字、一排並列的按鈕，記得打開換行讓手機版自動折行。
• 要把一組相關區塊垂直收齊、統一間距：用 Stack。例如標題、內文、行動按鈕這種上下排列又想保持一致間隔的組合。
• 要做規律的多欄網格、需要指定每欄比例：用 Columns。例如三格方案比較、左右圖文對照，這類版面靠精確欄寬才整齊。

實際頁面常常是這幾層疊起來用的。一個常見組合是：外層用群組當容器、設好背景與內距，裡面再放一個 Columns 做三欄，每一欄內部又各放一個 Stack 把圖、標題、說明垂直收齊。這種巢狀結構正是區塊編輯器的設計初衷，外層管整體外觀，內層管局部排列，各司其職。

回到最開始的三層結構：當你清楚自己現在是在處理單一區塊、排版容器，還是整個區段，這些選擇就不再混淆。群組、Row、Stack 是同一種容器的三張臉，Columns 是另一種更講究欄寬的容器，而區段是它們組合出來的更大範圍。下次再卡住時，先問自己「我現在要裝的是哪一層」，答案通常就浮出來了。建議實際開一個測試頁面，把同一組區塊分別用群組、Row、Columns 排排看，再縮放瀏覽器視窗觀察手機版的差異，幾次操作下來，這三層結構就會真正變成你的直覺。