用區塊編輯器排版時，最常卡關的不是字不會打，而是「東西排不到想要的位置」。標題想放在圖片右側、兩顆按鈕想並排卻一到手機就上下疊、想幫一整段內容換個底色又不想動到別人的間距，這些需求單靠多重欄位（Columns）往往做不漂亮。group row stack 區塊就是 WordPress 為了解決這類版面問題而設計的容器，搞懂它們，排版自由度會直接拉高一個層級。

這篇會把群組區塊的三個主要變體 Group、Row、Stack 講清楚，順帶交代同家族的 Grid，從建立、轉換、對齊設定，一路講到背後的版面類別原理，最後用幾個教學站常見的版面示範怎麼組出來。看完你會知道每種變體該用在哪，而不是每次都靠多重欄位硬湊。

群組、Row、Stack 三種區塊其實是同一個區塊的不同樣貌

Row 與 Stack 並不是獨立的區塊，它們和 Group 一樣，底層都是同一個「群組區塊」（core/group），差別只在預設的版面排列方式。Group 是標準容器，內容沿用一般的垂直流向；Row 把容器切換成水平排列，內部區塊會並排成一列；Stack 則是明確指定垂直堆疊。換句話說，你建立任何一個，之後都能在區塊設定裡互相切換，不需要刪掉重來。

理解這點很重要，因為它解釋了三者「設定幾乎一樣」的原因。對齊、底色、內距、邊框、間距這些選項在三個變體裡都看得到，唯一的明顯差異是：Group 可以指定內容最大寬度（讓內部內容不要佔滿整個容器），而 Row 與 Stack 沒有這個選項，但多了一個「整體對齊容器」的調整。

把容器和「容器怎麼排內容」這兩件事拆開來看，後面所有設定就不會亂。容器負責收納與外觀（底色、內距、邊框），版面類別負責排列方向與對齊，這是 WordPress 版面系統一貫的設計邏輯。

Group、Row、Stack、Grid 四種變體分別適合哪些版面

先給結論：要套用共同樣式但不改變排列，用 Group；要水平並排，用 Row；要明確垂直堆疊，用 Stack；要排成棋盤式格狀，用 Grid。四者同源，選哪個取決於你想要的排列行為。

• Group（群組）：標準容器，不改變內容流向，內部區塊依舊由上往下排。最常見的用途是把一段標題、段落、按鈕包起來，統一加底色、設定共用的內距與外距，或限制整段內容的最大寬度。
• Row（橫向群組）：把容器變成水平的彈性盒，內部區塊改為左右並排。典型場景是頁首的網站標誌加導覽選單、一個圖示配一行文字、或是幾顆並排的按鈕。
• Stack（堆疊）：明確指定垂直堆疊，並且能設定整個堆疊在容器裡靠左、置中或靠右。它最有價值的地方在於，可以把一組內容當成一個整體，對齊到容器的某一側。
• Grid（格狀）：把內部區塊排成格子，可設定欄數或最小欄寬，還能讓單一元素跨越多欄多列。適合做圖庫、特色方塊、商品卡片這類需要對齊成棋盤的版面。

這裡有個容易忽略的判斷點：Row 和多重欄位看起來都能做水平排列，但 Row 是彈性盒，內部區塊預設會依自身內容決定寬度、空間不夠時自動換行；多重欄位則是固定比例切版，不會自動依內容縮放。需要「依內容決定寬度、窄畫面自動換行」的並排，Row 通常比多重欄位合適。

怎麼建立群組區塊，又怎麼把它拆回原本的區塊

建立群組區塊有兩種路徑。第一種是先開空容器再往裡放東西：點擊區塊插入器的「+」按鈕，搜尋 group、row、stack 或 grid，或是在新的一行直接輸入「/row」「/stack」按 Enter 快速插入，接著再用容器內的「+」加入子區塊。

第二種是把現有的幾個區塊一次包起來。先選取多個區塊，可以用滑鼠框選，也可以點第一個區塊後按住 Shift 再點最後一個，或在「列表檢視」裡用同樣的 Shift 連選。選好之後，浮動工具列會出現 Row、Stack、Grid 的圖示，點下去就把這些區塊收進對應的容器。

要注意建立後的「變體切換」和「拆解」是兩件事。切換變體是在區塊設定面板頂端點 Group、Row、Stack、Grid 的圖示，內容不動、只換排列方式。拆解則是要在列表檢視裡選到該容器，點旁邊的三個點，選「取消群組」（Ungroup），這樣會移除外層容器但保留裡面的子區塊，不會把內容一起刪掉。想換個排列方式就切換變體，想徹底拿掉容器就取消群組，別把兩者搞混。

Row 與 Stack 的對齊、排列方向與換行設定怎麼調

Row 與 Stack 的排列行為集中在兩個地方：上方的浮動工具列，以及右側設定面板的「版面」區。先掌握幾個核心開關。

項目對齊（Justification）：控制內部區塊沿著排列方向怎麼分布，有靠左、置中、靠右、以及「項目間留白」（space between）四種。最後這個會把內部區塊均勻撐開、平分剩餘空間，做頁首那種「標誌靠左、選單靠右」的版面非常好用。

交叉軸對齊：當一列裡的區塊高度不一致時，可以指定它們靠上、置中、靠下或拉伸對齊。例如一張圖配一段文字並排，文字要不要跟圖片置中對齊，就靠這個設定。

排列方向（Orientation）：在版面設定裡可以把方向在水平與垂直之間切換。這其實就是 Row 與 Stack 的本質差異，調整方向等於在兩個變體間轉換。

換行（Wrap）：水平排列時可以開關「允許換行」。開啟時，內部區塊在空間不夠（例如手機螢幕）會自動掉到下一行；關閉時則強制擠在同一行。要做響應式版面，這個開關幾乎一定要開著，否則窄畫面會把內容壓扁或溢出。

下面這個示意說明同一組「標誌加選單」用「項目間留白」時的分布：

工具列另外還有「對齊」選項（無、寬版、全寬）與位置設定，這兩個牽涉到容器本身在頁面上的寬度與是否吸附，下一節單獨說明。

內容寬度、寬版、全寬與「內部區塊使用內容寬度」的關聯

容器對齊有三個層級，常被混為一談：「無」就是預設，寬度等同佈景主題的內容寬度；「寬版」會超出內容寬度、往兩側延伸；「全寬」則延伸到整個螢幕邊緣，前提是佈景主題有支援這個對齊樣式。沒支援的主題就算選了全寬也不會生效。

真正容易卡住的是 Group 區塊裡那個「內部區塊使用內容寬度」（Inner blocks use content width）的開關。它的作用是：當你把一個 Group 設成寬版或全寬時，要不要讓裡面的子區塊仍然被限制在主題的內容寬度內。打開時，外層容器是寬的、但內部文字段落仍維持在可讀的窄欄寬度，這正是大多數文章版面想要的效果——背景色塊鋪滿、文字卻不會被拉到難以閱讀的超寬。關掉時，子區塊會填滿整個容器寬度。

用一句話記：寬版與全寬管「容器有多寬」，內部區塊使用內容寬度管「容器裡的內容要不要跟著一起變寬」。想做「滿版底色、置中窄欄文字」的區段，就是外層 Group 設全寬、同時開啟內部區塊使用內容寬度。

群組區塊背後的版面類別與間距原理

把這層原理講清楚，是這篇想補上多數教學沒講的部分。WordPress 6.1 之後，容器類區塊的排版改由幾個語意化的版面類別統一管理，理解它們，就能解釋為什麼有些設定在某個變體生效、換個變體卻不見了。

版面主要分三型。flow（流向） 是瀏覽器最原始的排版方式，內部區塊填滿父容器寬度。constrained（受限） 是 Group 的預設，內部區塊預設被限制在主題內容寬度內，這就是前一節那個開關背後的機制——開啟對應 constrained、關閉對應 flow。flex（彈性） 則是 Row 與 Stack 採用的型態，建立在 CSS Flexbox 之上，但只取了適合區塊編輯器的一小部分功能。

間距的處理方式會隨版面類別改變，這點最反直覺。在 flow 與 constrained 版面裡，區塊之間的間距是套用到子區塊的上方外距（margin-block-start）；但在 flex 版面裡，同一個間距值改套用到容器的 gap 屬性。也就是說，同樣是「區塊間距」這個設定，Group 與 Row 在底層用的是不同的 CSS 機制，這解釋了為什麼把一堆區塊塞進 Row 之後，間距的表現和原本垂直排列時不太一樣。

這個間距值在主題裡叫 blockGap，佈景主題可以透過 theme.json 設定全站預設，也能單獨為某個區塊指定。對一般編輯者來說不必碰程式碼，但知道「間距由主題定義、且 flex 與非 flex 算法不同」這件事，遇到間距怪怪的時候就知道往哪邊查，而不是瞎調。flex 版面還有水平與垂直方向之分，以及前面提過的換行開關，對應到的就是 Flexbox 的 flex-direction 與 flex-wrap。

用群組與 Row 解決多重欄位在手機上跑版的問題

多重欄位最常見的踩雷，是窄畫面跑版。一個典型情境：用兩欄做「圖示配電子郵件地址」，桌機看起來正常，一縮到手機，瀏覽器仍硬把它維持成兩欄，結果圖示和文字比例失衡、信箱文字還被擠到斷行。另一個情境是用欄位放兩顆並排按鈕，手機上欄位被迫上下堆疊，按鈕反而一上一下。

換成 Row 就能繞開這些問題。Row 是彈性盒，內部區塊依自身內容決定寬度，空間夠就並排、不夠就靠換行設定自動掉行，不會像欄位那樣硬切固定比例。前面那個「圖示配信箱」的例子，改用一個 Row 包住圖片區塊與段落區塊，縮小視窗時兩者仍維持並排、文字也不會被切壞。

兩顆按鈕並排則更單純，本來按鈕區塊（Buttons）底層就是 flex 版面，本身就會並排；真要包進容器統一控制，用 Row 即可，避免動用會固定比例的欄位。一個實用原則是：需要「依內容自動縮放、窄畫面自動換行」的並排版面優先用 Row；只有明確要「固定比例分欄」（例如左欄三分之一、右欄三分之二）時才用多重欄位。把這條判斷記住，能省下大量回頭修手機版的時間。

用 Group、Row、Stack 排出幾個常見版面

把前面的設定串起來，看幾個教學站常用的版面怎麼組。

滿版底色的特色區段：最外層放一個 Group，對齊設全寬、給一個背景色，並開啟內部區塊使用內容寬度。裡面依序放標題、段落、按鈕。這樣底色會鋪滿整個螢幕寬度，文字卻維持在置中的可讀欄寬，是最常見的區段樣式。

圖片右側放標題與按鈕：先放一個有背景圖的封面區塊（Cover），裡面放一個 Stack 並設定靠右對齊，Stack 內再放一個限制了最大寬度的 Group，把標題、段落、兩顆按鈕收進去。靠 Stack 的整體靠右對齊，內容就會貼在圖片右側，而不是落在正中央；兩顆按鈕無論視窗多窄都維持並排，不會像欄位那樣上下分家。

頁首的標誌與選單：用一個 Row，項目對齊設「項目間留白」，左邊放網站標誌、右邊放導覽選單，交叉軸對齊設置中讓兩者垂直對齊。視窗縮小時開啟換行，選單就會自動掉到下一行而不溢出。

下面示意這個「封面圖加右側內容」的結構分層：

教學站或商店頁也常需要把幾張商品卡或方案卡排整齊。卡片數量固定、想要嚴格對齊成棋盤時，用 Grid 設定欄數或最小欄寬最省事，每張卡片內部再各放一個 Group 收納圖、標題、簡述與按鈕。如果卡片牽涉到方案價格或結帳按鈕，版面層面只要把它當成一般內容區塊排列即可，按鈕連到結帳流程是另一回事，這裡不展開金流設定。需要卡片依數量自動換行、不堅持嚴格對齊，則用開啟換行的 Row 也行，差別在 Grid 會把每格對齊成等寬格子，Row 則讓每張卡依內容寬度自然排列。

選對容器，版面才不會每次都在跟欄位搏鬥

群組區塊家族的價值，在於把「收納內容」「控制外觀」「決定排列」這三件事拆開來各自設定，而不是像多重欄位那樣綁死成固定比例。記住一條主軸就能快速決策：要套共同樣式不改排列用 Group，要彈性並排用 Row，要整組垂直對齊用 Stack，要棋盤格用 Grid，只有真的需要固定比例分欄時才回頭找多重欄位。

下一次排版前，先想清楚這個區段是「滿版底色置中文字」「圖配文並排」還是「卡片陣列」，對照上面的判斷直接選對容器，再用對齊、換行、內容寬度三個開關微調。把這套流程練熟，手機跑版和空欄位的問題會少掉一大半，版面也會跟著穩定下來。