在區塊編輯器裡選好三個色塊要並排，切到手機預覽卻看到它們全部擠成一條直的；好不容易調好左右間距，換一個瀏覽器寬度版面又整個跑掉；想幫整組區塊統一套一個背景色跟內距，翻遍設定面板卻找不到那個「整組」的選項——這幾個場景，只要用區塊編輯器排過版，幾乎都遇過。
問題通常不在顏色或字級選錯了，而在一開始就選錯了容器。區塊編輯器裡的段落、標題、圖片這類內容區塊，預設的行為就是由上到下各自獨立堆疊；真正決定這些內容能不能左右並排、置中對齊、統一套上背景色與留白的，是包在外層的容器區塊，最基本的一種就是群組區塊（Group）。容器選對了，並排、對齊、響應式這些效果幾乎是內建的；選錯了，就得靠一堆額外的自訂樣式去硬湊，還未必在手機版站得住。
容器區塊不只群組一種，這篇把範圍收在最常被搞混、也最常實際用到的四種，操作介面與設定名稱都以最新版區塊編輯器（WordPress 7.0 系列、對應的 Gutenberg 最新版）為準。
容器區塊決定內容區塊能不能並排、置中、對齊
區塊編輯器裡的段落、標題、圖片、按鈕這類元素統稱內容區塊，它們被插入頁面之後，預設的行為就是各自獨立、由上到下依序往下疊，這是編輯器原生的排版邏輯，沒有例外。想做出左右並排的卡片、置中對齊的區塊、或整組套上同一種背景色與留白，得靠另一群專門的容器區塊把這些內容區塊包起來，再統一套上排版邏輯。容器家族目前至少有七種：群組（Group）、欄（Columns）、覆蓋（Cover）、媒體與文字（Media and Text）、列（Row）、堆疊（Stack）、格線（Grid）。
這幾種容器不是各自獨立開發出來的七套邏輯。根據 WordPress 官方學習平台 Learn WordPress 的教學，選取一個群組區塊時，編輯器會讓你在標準容器、列、堆疊、格線之間切換，列（Row）會把內部區塊水平排列，堆疊（Stack）會垂直排列，兩者技術上都是群組區塊的版面配置變化版，只是 layout 屬性設定不同而已。這也是為什麼它們共用同一套背景色、留白、邊框設定介面，只有排列方向與能不能固定寬度不一樣。
這篇聚焦最常被搞混、也最常實際用到的四種：群組、欄、堆疊、列。格線區塊在 Gutenberg 目前仍在持續穩定化中，先不展開；操作介面與設定名稱都以最新版區塊編輯器為準，舊版經典編輯器或已經棄用的區塊寫法不在討論範圍內。
群組區塊預設限制內部寬度，關掉開關版面才會撐滿
把三個色塊圈起來，一次套用背景色、留白跟命名，靠的就是群組區塊（Group）。它是容器家族裡最基礎的一種，用途是把選取的多個區塊包成一個可以整組管理的單位，要調整背景色、內距、邊框，只要點一次外層容器就能整組套用，不必逐一調整裡面的小區塊。實際操作時，先選取要打包的區塊，再從工具列的選項選擇組成群組，這幾個區塊就會被包進同一個 Group 容器裡。
這裡有一個很容易被忽略、卻直接決定版面能不能真的撐滿的開關，叫作「Inner blocks use content width」（內部區塊使用內容寬度）。根據 Learn WordPress 官方教學，這個開關預設是開啟的，意思是即使把群組本身的對齊方式改成寬版或滿版，裡面包住的區塊仍然會被主題定義的內容寬度限制住，不會真的跟著撐開到畫面兩側。要讓內部區塊真正用滿版面空間，得手動把這個開關關掉，這一步常被跳過，結果就是明明選了滿版對齊，畫面看起來卻還是卡在中間一小條。
群組區塊預設就具備響應式行為，不用另外設定，在手機預覽時版面會自動調整。比較進階的用法，是把整個頁首包成群組並開啟置頂（sticky）設定，讓它在使用者往下捲動頁面時固定黏在畫面上方。要讓這個效果正常運作有兩個前提：背景色不能是透明的，否則往下捲動時底下的內容會直接透出來、跟頁首文字疊在一起；另外也要記得關掉前面提到的 Inner blocks use content width，不然頁首裡的內容一樣會被內容寬度限制住，撐不滿整條置頂列。
欄區塊的並排邏輯與跨層級寬度設定
左邊放一張圖、右邊接一段文字，或是三張卡片並排，這類需要精準控制寬度比例的版面，靠的是欄區塊（Columns），也是版面裡最常見的並排工具。新增 Columns 區塊時，編輯器會先讓你挑一個比例模板，像是二等分、三等分，或是二五比五零比二五這種不對稱組合，選好之後每一欄預設都是等寬，之後也可以再手動調整成任意比例。
這裡有一個實際操作時很容易踩到的陷阱，改整組欄的寬度跟改單一欄的寬度，是兩個完全不同的選取層級。根據 WordPress 主題廠商 Themeisle 的技術教學，要調整整組 Columns 的對齊方式（例如改成寬版或滿版），得先點選最外層的 Columns 容器，再從工具列選對齊選項；但要調整某一欄自己佔多少百分比，得先點進裡面那個個別的 Column 區塊，才會切換成單欄的設定，寬度欄位是在右側設定面板裡輸入數值，兩層操作互相獨立，點錯層級就會找不到自己要的選項。
另外一個容易漏掉的細節是，調整某一欄的寬度時，其他欄不會自動連動跟著縮放。Themeisle 的教學裡明確示範過，把第一欄的寬度改成 50%，另一欄仍然停在原本的 66%，兩者加起來已經超過 100%，系統不會幫你自動抓齊。Wake Forest University 的官方網站編輯文件也提到，個別欄位有一個開關可以選擇讓該欄自動填滿剩餘空間，或是手動輸入固定寬度；不管用哪種方式，總和都要自己核對過一遍，不然畫面很容易出現擠壓變形或留白過多的狀況。
手機版預設把欄堆疊起來，關掉開關才會維持並排
欄的寬度比例調好只是第一步，螢幕一變窄，排列邏輯又是另一回事，這正是讀者最常誤解、也最常在手機版看到跑版的地方。WordPress 核心內建一個「Stack on mobile」（在行動裝置堆疊）開關，預設是開啟的，當螢幕寬度縮小到一定程度，原本左右並排的每一欄會自動變成 100% 寬度，由左右並排改成上下垂直堆疊。這個行為是核心內建的固定機制，不需要另外設定樣式或寫任何自訂 CSS 就會自動生效。
這個開關的緣起，可以回溯到 WordPress 開源專案 gutenberg 的一項官方提案，這項提案把「Stack on mobile」設定加進欄區塊、預設為開啟，讓不想要自動堆疊的版面（例如頁尾的標誌或社群連結列）可以手動關掉。這個機制實際生效的斷點目前固定在螢幕寬度 781px（WordPress 核心樣式表定義），寬度小於等於這個數值時欄位就會變成 100% 寬、依序往下堆疊；預設開啟的用意，是讓多數版面在手機上不用額外處理就能維持可讀性。Wake Forest University 的官方編輯文件也確認，前台介面上真的看得到這個切換選項，不是只藏在程式碼裡。
反過來說，如果某個版面刻意希望在小螢幕上也維持並排，就得手動把這個開關關掉。典型情境是頁尾的小圖示配一小段文字，或是社群連結列這種本來排列就很窄、堆疊起來反而不好看的元素。這個一鍵堆疊的機制是欄區塊獨有的，後面會提到的列區塊完全沒有這個開關，遇到窄螢幕要另外處理，兩者的手機行為並不一樣。
堆疊區塊把元素直向排列、統一間距與對齊
把一張圖片、一個標題、一個按鈕當成一組單位管理，置中對齊、間距抓好，靠的是堆疊區塊（Stack）。它本質上是一個垂直方向的 flex 容器，天生把內容由上到下直向排列，這個效果乍看跟編輯器原生的堆疊行為很像，但堆疊區塊多了一層統一控制間距與對齊的能力，適合用在需要當成一組單位管理的情境，不只是排列方向對，連彼此的距離跟對齊點都能一次設定好。
第一個重點設定是子項目間距（block spacing）。這個值可以拉到 0，讓堆疊裡緊接著的兩個區塊完全貼在一起，常見用法是讓一個標題跟緊接的內文段落之間不留多餘空隙，看起來像同一個整體，而不是兩個各自獨立的區塊。
第二個重點是水平對齊方式（justification），可以選擇置中、靠左、靠右，或是讓項目之間平均分散的 space between。這個設定決定堆疊裡的內容在容器寬度裡怎麼分布，常用在需要置中呈現的標題群組，或是希望按鈕貼齊某一側的版面。
第三個是進階但很實用的技巧，把最小高度（minimum height）設定成百分比 100%，讓這個堆疊撐滿到跟旁邊並排的欄位一樣高。根據 Learn WordPress 官方教學的示範，常見情境是三欄卡片裡某一欄的文字內容明顯比較少，只要把那一欄的群組轉換成堆疊區塊，再到樣式面板的 Dimensions 找到 Minimum height、切換成百分比並設定為 100%，背景色跟按鈕就會跟著撐到跟旁邊內容較多的欄位同一條底線，不會出現一欄矮一截的落差。這個機制底層就是 CSS flexbox，根據 Ollie 區塊主題官方文件系列的說明，列與堆疊都是 WordPress 對 flexbox 的實作，對齊選項完整包含靠左、置中、靠右，加上 space between 這類分散對齊。
列區塊的水平排列邏輯與自動撐開寬度
列區塊（Row）是水平方向的 flex 容器，適合排少量、需要並排在同一行的小型項目，例如一個圖示旁邊接一段文字、一整組按鈕，或是頁首的標誌配上導覽選單。列跟欄區塊最根本的差異，在於列裡面每個項目的寬度是依內容自動撐開的，沒辦法像欄那樣手動輸入固定的百分比寬度，這正是列適合用在小元素、卻不適合拿來做精準版面比例配置的原因。想控制圖占 40%、文字占 60% 這種精準比例，列做不到，得換成欄。
第一個重點設定是 justification，可以選擇讓項目之間平均分散的 space between items，把某個項目自動推到最右邊。Learn WordPress 官方教學示範過一個常見的頁首組合，把網站標誌放進一個列區塊，接著把導覽選單也放進同一個列裡，設定裡選擇 space between items，導覽選單就會自動被推到最右側，跟左邊的標誌拉開距離，不用手動算間距或加空白區塊。
第二個重點是垂直對齊（vertical alignment），可以選擇頂端對齊、底端對齊，或是延展填滿整個容器高度。同一份教學也示範過另一個情境，把一組按鈕放進列區塊，先用 justification 把按鈕推到右側，再用垂直對齊選擇底端對齊，讓按鈕貼齊整條列的底部，這個組合常用在頁首要把標誌跟導覽選單的底線精準對齊的版面。技術部落格 Nelio Software 也做過對照，用列排一個圖示加一段信箱地址的組合，圖片跟文字能維持對齊、不會被壓縮變形；換成同樣的需求用欄來做，反而容易在窄版面把文字擠壓變形。
列在窄螢幕預設不會換行，要自己開啟允許換行
前面提到欄區塊有內建的 Stack on mobile 自動堆疊機制，列區塊完全沒有對應的一鍵開關。預設情況下，螢幕變窄時列裡的項目仍然會被硬擠在同一行，內容可能因此溢出版面邊界，或是被壓縮到變形、文字擠成一團，這正是列區塊在手機版最容易出狀況的地方。
要讓列在小螢幕自動換到下一行、達到接近堆疊的視覺效果，得手動找到並開啟「Allow to wrap to multiple lines」（允許換行到多行）這個設定。根據 Ollie 區塊主題官方文件系列的說明，列布局用 block gap 控制項目間距，若不開啟這個換行設定，內容在小螢幕上就會被不舒服地擠壓；開啟之後，版面才會依照容器寬度自動把超出的項目換到下一行，不再硬擠成一條。Learn WordPress 官方教學也示範過同樣的操作，選取列區塊，再從設定裡勾選允許換行到多行，確保設計在手機版能正常呈現。
開啟這個開關之後，介面上還會多出一個手機版排列順序的進階選項可以用，能決定換行後項目在小螢幕上的先後順序。堆疊本來就是垂直排列，不需要額外設定就對小螢幕友善；列卻要自己記得開啟換行，才不會在手機上跑版，兩者的預設行為並不對稱，排版時要記得列需要多一道手動確認。
四種容器沒有標準答案，看寬度固不固定、方向橫或直
群組、欄、堆疊、列的設定細節各不相同，但選容器不必每次都重新想一遍每個容器做了什麼，判準其實只有兩條。
第一條是寬度要不要精準固定成比例。需要精準控制的版面，像圖占 40%、文字占 60% 這種需要手動輸入百分比的情境，選欄（Columns）；不需要精準比例、只想讓內容依自身大小自動撐開的話，選列（Row）或堆疊（Stack）。
第二條是排列方向要橫的還是直的，還是根本不特別要求方向。要橫向排成一列，用列；要直向排列，用堆疊；只是想把一群區塊包起來、統一套上背景色與留白這類樣式，不特別要求排列邏輯，就用最基礎的群組（Group）。技術部落格 Nelio Software 也指出，列跟堆疊能設定的屬性跟群組非常相似，差別在於群組可以指定內容的最大寬度，列跟堆疊做不到，但列跟堆疊多了一個群組沒有的能力，就是可以設定整個容器內容相對於外層容器的分散對齊方式。
再強調一次前面提過的底層事實，列跟堆疊本質上是同一個區塊的兩種方向變化版，會共用背景色、留白、邊框這些設定介面，真正的差別只在橫向自動撐開跟直向自動撐開。WordPress 國際技術服務商 rtcamp 在官方技術手冊裡，把這幾種容器的典型應用場景做了交叉比對，列適合價格方案並排比較、搭配圖示的功能亮點這類橫向陳列；堆疊適合對齊元素的清單、文章內容這種講究垂直節奏的版面；欄則留給需要精準版面比例控制的情境。這幾種分工剛好呼應前面兩條判準，選容器時先問寬度固不固定、方向橫還是直，很快就能縮小到對的選項。
容器互相包起來，才拼得出常見版面公式
搞懂群組、欄、堆疊、列各自的原理只是基本功，實際排版時，真正好用的版面幾乎都是把好幾種容器互相包起來、疊出來的組合，不是單獨用一種容器就能處理好。以下幾個是實際常會遇到的版面情境，重點不只是照抄操作步驟，而是搞懂為什麼選這個容器組合、不是別的，這才是選對容器真正發揮價值的地方。
用列與堆疊組出的吸睛頁首
一個常見又好看的頁首組合，是最外層用列區塊把標誌區跟導覽選單並排。如果標誌區同時要放圖片跟一句標語文字，再往裡包一層堆疊，把兩者直向貼齊，設定堆疊的子項目間距為 0，讓圖片跟標語緊貼在一起，不留多餘空隙，看起來像同一個品牌識別區塊，而不是兩個各自漂浮的元素。
根據 Learn WordPress 官方教學的完整示範，操作順序是先加入一個列區塊，放進網站標誌，緊接著在標誌旁邊加入標語區塊，再打開列表檢視，選取標誌跟標語這兩個區塊、把它們包進一個堆疊區塊，並確認堆疊的子項目間距設為 0。接著回到最外層的列區塊，選擇 space between items，導覽選單就會自動被推到最右邊，跟左側的標誌識別區拉開距離。這個組合的邏輯很清楚，列負責橫向撐開整個頁首寬度、把導覽推到底，堆疊負責把標誌跟標語緊密地黏成一個單位，兩層各司其職。
用覆蓋與堆疊組出的置中卡片區
另一個常見情境是用覆蓋區塊（Cover，可以放圖片或色塊當背景）當底，裡面包一個堆疊，堆疊裡依序放標題、分隔線、按鈕，並把堆疊本身設定成置中對齊。這個組合能讓文字內容維持在固定寬度、不會隨著背景圖片的尺寸被拉散開來，同時保留背景圖片滿版鋪開的視覺效果，背景負責視覺張力，堆疊負責把真正要讀的文字內容收在一個可控的寬度範圍。
Learn WordPress 官方教學完整示範過這個公式，先加入一個覆蓋區塊並選好圖片，在覆蓋區塊裡加入一個堆疊區塊，堆疊裡先放一個標題，標題下方接一個分隔線，分隔線再接一組按鈕，最後選取整個堆疊，把對齊方式改成置中。Nelio Software 的技術部落格也補充過另一種變化做法，用覆蓋包堆疊、堆疊設定成靠右對齊，裡面再放一個限制最大寬度的群組，用來解決文字要靠右對齊、但按鈕不能被壓扁變形這類版面需求，取代原本用欄來做、卻在窄螢幕容易跑版的舊做法。
左圖右文優先用欄而非列
左圖右文是最容易選錯容器的版面之一。這種需要精準比例（例如圖片占 40%、文字占 60%）、又希望手機版自動改成上下堆疊的版面，應該用欄（Columns），而不是列（Row）。原因回到前面已經拆過的兩個機制：列裡的項目寬度只能依內容自動撐開，沒辦法手動設定固定比例，而且列完全沒有內建的手機自動堆疊開關，窄螢幕時得自己另外開啟允許換行才不會擠壓變形。
欄剛好同時具備這兩種能力：個別欄位可以手動輸入精確的百分比寬度，想要圖占 40%、文字占 60% 直接在設定面板輸入數字就好；而且欄天生內建 Stack on mobile，螢幕寬度縮小到 781px 以下，兩欄會自動變成上下堆疊，不用另外處理響應式。左圖右文這種同時要求精準比例、又要求手機自動堆疊的組合，正好是欄的強項，也是它跟列最根本的分工差異。
用堆疊撐高把三欄卡片拉齊
三欄卡片是很常見的版面，但只要其中一欄的文字內容明顯比其他欄短，背景色跟按鈕的位置就會跟著矮一截，整排看起來高低不齊。這個情況可以靠前面提過的最小高度技巧解決：先把內容較少那一欄的群組轉換成堆疊區塊，再到樣式面板的 Dimensions 找到 Minimum height，把單位切換成百分比，數值設定為 100%。
根據 Learn WordPress 官方教學的示範，操作完成後，那一欄的背景色會跟著撐開，一路對齊到旁邊內容較多的欄位同一條底線，按鈕的位置也會跟著往下推，三欄卡片看起來就像同一個高度基準線上的整齊排列，不會再出現一欄明顯矮一截的落差。這個技巧的關鍵就在於堆疊區塊底層是 flex 容器，能夠接受百分比高度並實際撐開，群組區塊本身並不具備這個彈性。
排版一直調不好時，與其一路加自訂樣式去硬湊間距跟對齊，不如先退一步問自己在包哪一種容器。內容需不需要精準比例、要不要在手機自動變化、彼此該橫著排還是直著排，這幾個問題想清楚，群組區塊、欄、堆疊、列這四個容器該用哪一個通常就有答案。真正拉開差距的往往不是單一容器用得多熟練，而是懂得把它們互相包起來搭配，像頁首那樣列裡包堆疊、像卡片區那樣覆蓋裡包堆疊，版面公式想通了，接下來遇到新的排版需求，也會知道該從哪一種容器組合開始試。