一個網頁版面，說到底就是在幫一大堆內容找位置：標題放哪、圖片該跟誰站在一起、按鈕貼在正下方好不好，都得先想清楚。早期的 Elementor 把這件事交給尺寸固定的「段」和「欄」，像用量好格數的收納盒裝東西，格子配好了東西剛好塞得下，但只要想多加一層、換個排法，常常得整組拆掉重排。Elementor 容器（Container）要解決的正是這個問題。
它像一個可以自由伸縮、還能一層疊一層往下放的收納盒，裡面要放文字、圖片這些小工具，或是再放一個容器都可以，不受固定欄數卡死。也因為這樣，Elementor 陸續把容器訂成新網站的預設版面工具，舊版段與欄雖然還能用，但新功能與資源都不再往那個方向投入。
搞懂容器怎麼運作，排版速度變快是其次，連手機版怎麼收、卡片要不要等高這類細節，也能靠幾個設定處理掉。先從容器跟舊版段、欄實際差在哪講起，再把方向、對齊、間距這些排版邏輯一項一項拆開來看。
容器是什麼？跟舊版的段與欄有什麼差異？
Elementor 容器是用來裝版面內容的基本元素，裡面可以放文字、圖片這類小工具，也可以放另一個容器，整套邏輯建立在 CSS Flexbox 這套排版技術之上，瀏覽器會自動算好東西怎麼排，不用自己寫版面座標。
跟舊版系統比，結構差在哪最明顯。舊版的段（Section）是最外層的框架，裡面放欄（Column），欄裡如果還要再分區塊，只能加一層「內部區塊」，最多疊一層就到頂了，版面複雜一點，常常得另外寫 CSS 才做得出來。容器沒有這種卡死的層數，容器裡可以直接放小工具，也能一路往下再放子容器，理論上想疊幾層都可以。
換掉舊系統不只是介面好不好看，而是幾個實際的理由：
- 少了層層包裹的段、欄、內部區塊，網頁的程式碼結構變精簡，瀏覽器要解析的節點變少，頁面也載入得更快。
- 巢狀不再卡死一層，像卡片裡面還要再放一組小卡片這種複雜版面，不用另外寫程式碼就做得出來。
- 每個裝置的方向、對齊、間距、換行都能分開調整，不必為了手機版另外藏一組隱藏區塊。
- 整顆容器可以直接設成可點擊的連結，不用再另外包一顆按鈕元件。
這也是為什麼容器現在是新網站的預設版面工具。新建的網站打開編輯器，看到的直接就是容器；舊版段與欄還能繼續用，也能從網站設定裡另外啟用，但新功能幾乎都只往容器這條路發展。
已經用舊版做好的頁面，換成容器版面前要注意什麼？
如果手上的頁面本來就是用段與欄做的，不用整組砍掉重練。Elementor 編輯器內建「轉換成容器」的工具：把滑鼠移到要轉換的段上，點編輯圖示，在版面設定裡找到「Convert」，就會在原本的段下方多出一份容器版本，方便兩邊互相比對。
有兩件事要先知道。第一、這是單向轉換，容器頁面沒辦法再轉回段與欄，轉之前最好先備份。第二、建議一次只轉一個段，轉完馬上檢查：垂直對齊常常跑掉，子容器的內容寬度也值得留意，可以先把 Wrap 打開，比較容易抓出寬度算錯、擠出容器邊界的子容器；padding 與 margin 偶爾轉換不完整，百分比寬度的欄位也常常需要手動再調一次。
新增容器的基本操作與版面寬度設定
版面邏輯弄懂了，接下來是動手排，容器怎麼加、寬度怎麼抓，才是真正決定畫面長相的關鍵。
新增容器的方式比舊版直覺。在編輯器畫布上點「+」號，會直接跳出容器結構選單，先選要用的方向、再挑一個欄位配置的預覽圖，選好之後就能把小工具直接拖進容器裡，不用像舊版一樣，先建一個段，再一層層往下建欄位才能放內容。
容器的版面寬度有兩個選項要先弄清楚。Boxed 只調整容器內容本身的寬度，容器的外框寬度不會跟著變；Full Width 則是容器寬度跟著螢幕滿版跑，內容寬度改用 padding 和 margin 去微調。另外還有 Min Height（最小高度），常用來確保手機螢幕上文字或圖片不會被壓得看不完整。
容器還有一個容易被忽略的設定，HTML Tag。可以把整顆容器包成「a」連結標籤，讓整塊區域都能點擊，圖片卡片式的導購區不用再多包一顆按鈕；HTML 標籤在 DOM 裡的位置高低，也會影響搜尋引擎判讀內容的重要程度，值得依內容性質選對標籤，不是每顆容器都用預設的 div 打發。
容器架好、寬度也設定好之後，接下來要決定的是裡面的東西怎麼排，這就要從方向設定開始。
方向（Direction）怎麼決定元素橫排還是直排？
Direction 決定的是容器裡的東西橫著排還是直著排，也是後面對齊、間距設定的判讀基準。它有四個選項：Row，水平並排，由左到右；Column，垂直堆疊，由上到下；Row Reversed 和 Column Reversed，排列方向相反，但不用去動小工具原本在編輯器裡的順序。
哪種版面配哪個方向，其實有跡可循。像主視覺區塊常見的「左邊文字、右邊圖片」，或是導覽列這種左右並排的元素，用 Row 就對了；功能列表、表單這類要讀者一項項往下看的內容，改用 Column 比較順暢。Reversed 系列則留給一個特定情境，想調換左右或上下的視覺順序，卻不想動到小工具原本在結構裡的排列時使用。
多數版面桌機用 Row 把東西橫向並排，螢幕變窄時常會把同一顆容器的方向切成 Column，讓內容改成上下堆疊。這是方向這個屬性本身的行為，至於怎麼依不同裝置細部調整，牽涉到另一套斷點設定，這篇先聚焦在容器結構本身，不在這裡展開。
版面對齊看 Justify 和 Align，留白交給 Gap 和 Wrap
方向決定了排列的大方向，接下來輪到 Justify、Align、Gap、Wrap 這四個設定上場，它們都在容器的版面頁籤裡，一起決定容器內的東西怎麼分布、貼齊哪一邊、留多少空隙，以及擠不下的時候要不要換行，是排版時最常來回調整的一組屬性。
主軸的空間分配，交給 Justify Content 決定
主軸指的就是 Direction 設定的那個方向。Justify Content 決定容器裡的元素沿著這個方向怎麼分配剩餘空間，有六個選項：
- Start：全部貼齊開頭。
- Center：置中對齊。
- End：全部貼齊結尾。
- Space Between：第一個元素貼齊開頭、最後一個貼齊結尾，中間平均分配剩下的空間。
- Space Around：每個元素左右留一樣的空間，頭尾跟容器邊界的間距只有中間間距的一半。
- Space Evenly：連頭尾跟容器邊界的間距都拉成跟中間一樣寬。
最常被用到的是 Space Between，導覽列就是典型例子，把 LOGO 推到最左邊、選單和按鈕推到最右邊，中間自動留白，不用手動算間距。
交錯軸的對齊，由 Align Items 決定
交錯軸是跟主軸垂直的另一個方向。容器方向設成 Row 時，Align Items 控制的是上下對齊；方向設成 Column 時，控制的是左右對齊。選項有四個，Start、Center、End，還有 Stretch，會把元素撐滿整個交錯軸的空間。
Stretch 最常見的用途是讓多欄卡片版面等高。只要外層容器的 Align Items 設成 Stretch，高度不一的幾張卡片就會自動被撐成一樣高，不用逐張手動設定高度。
元素間距與換行，Gap 和 Wrap 要搭配著用
Gap 管的是元素跟元素之間的距離，跟 margin 不一樣，margin 連容器邊緣的留白也會一起算進去，Gap 只算元素彼此之間。預設值是 20px，單位可以用 PX、百分比或 VW，也能在網站設定的版面選項裡一次改掉全站的預設值。
Wrap 決定空間不夠塞的時候怎麼處理。No Wrap 會硬把所有元素擠在同一行，可能被壓縮或超出容器邊界；Wrap 則是排不下時自動換到下一行。這兩個設定很常一起用，卡片列表最典型的做法，就是桌機一排擺好幾張卡片，Wrap 打開，螢幕變窄時卡片自動換到下一行，不用另外做斷點版面。
巢狀容器要怎麼設計，版面才不會越疊越亂？
方向、對齊、間距這些屬性管的是同一層容器內部怎麼排；版面要做出層次感，得往下再疊一層容器，也就是巢狀容器。巢狀容器的概念很直覺，容器裡面還可以再放容器，一路往下疊沒有卡死的層數限制。可以把它想成俄羅斯娃娃，外層容器決定大架構的方向與分布，裡面每個子容器再各自設定自己的方向、對齊、間距，兩層各管各的，互不干擾。
實際會用到巢狀的情境，比想像中常見。假設要做一組排版一致、每組裡面還要再放一個裝飾元素，例如一條分隔線，比起硬調每個小工具的外距，用巢狀容器管理明顯更好維護。
做法是外層容器方向設 Row、Justify Content 用 Space Between，把幾個大分類推開；每個分類再各自包一層子容器，設成 Column，內部同樣用 Space Between 或 Gap 把組內元素上下排開。兩層各自的 Gap 分別處理彼此的間距，之後想在小螢幕收成兩欄、甚至直接疊成一欄，只要調整外層容器的 Wrap 或方向，整組排版就會跟著變，不用逐一調整每個元素。
巢狀雖然沒有層數上限，但實務上還是有個拿捏，疊超過三層左右，程式碼結構就會變得又大又難管理。建議先想清楚版面骨架，別為了一點微調就多包一層容器。
Grid 容器是什麼？什麼時候該用它取代 Flexbox？
巢狀容器解決的是版面「層次」的問題，但不管疊幾層，Flexbox 骨子裡還是只沿著一個方向排版，橫的或直的擇一；版面要同時對齊橫跟直兩個維度，就得換一套系統，也就是 Grid 容器。Grid 容器能同時控制欄和列兩個維度，讓每個元素精準落在指定的格子裡，這是兩者最根本的差異。
Grid 容器的版面設定圍繞著幾個項目展開：
- 欄數（Columns）與列數（Rows）：預設用 fr，也就是比例單位，計算寬高，也能切換成 PX、EM 這類固定單位，甚至個別指定每一列的高度。
- Gaps：把欄距跟列距分開設定。
- Autoflow：決定新加進來的元素照 Row 方向排滿一列再往下一列，還是照 Column 方向排滿一欄再往右一欄。
- Justify Items 與 Align Items：調整格子裡內容物本身怎麼對齊。
什麼時候該選 Grid、不選 Flexbox，看的是版面需不需要橫跟直都對齊。整齊的方形相片牆、規格一致的方案卡片，甚至要讓某個元素刻意橫跨兩欄兩列的雜誌式排版，都是 Grid 的主場。Flexbox 搭配 Wrap 雖然也能排出類似的多欄效果，但沒辦法讓某個元素指定橫跨幾欄幾列，這種精準對齊的需求還是得靠 Grid。
兩者不是二選一，可以混著用。Grid 容器裡的某一格可以放一個 Flexbox 容器，Flexbox 容器裡也能再放一個 Grid 容器，一個頁面常見的做法是大架構用 Flexbox 搭好，需要方格對齊的局部區塊才改用 Grid。
實作一個三欄服務卡片版面，從桌機排到手機
Flexbox、Grid、巢狀，這幾套邏輯拆開來看都不難，真正的差別在組合起來怎麼用。接下來直接做一次三欄服務卡片版面，目標是三張等高的卡片，各自放圖示、標題、說明文字，桌機三欄並排，螢幕變窄時自動疊成一欄。
- 建外層容器，Direction 設成 Row，把 Wrap 打開，讓卡片在空間不夠時能自動換行或疊行；Justify Content 依版面需求設成 Center 或 Space Between，Gap 抓一個看起來舒服的留白值，例如 24px 到 32px 之間。
- 外層容器裡放三個子容器，也就是三張卡片本身，寬度先留在預設空白、不手動輸入比例，改把每個子容器的 Grow 打開。寬度一旦另外指定數值，Grow 就不會生效，兩個設定不能同時用。交給 Grow 自動平分剩餘空間，三張卡片才會撐得剛剛好，不會在中間留下一塊不上不下的空白。
- 每張卡片（也就是子容器）的 Direction 設成 Column，把圖示、標題、文字三個小工具垂直堆疊；外層容器的 Align Items 設成 Stretch，讓高度不一的三張卡片自動拉成一樣高，不用逐張手動調整。
- 手機版不用另外做複雜的斷點設定，通常只要把外層容器在手機的 Direction 從 Row 切成 Column，三張卡片就會直接改成上下堆疊，原本設定的 Wrap 也不會互相打架。
這裡只示範容器本身方向切換的基本行為，不展開完整的斷點設定教學。從這個練習可以看出，一開始學的方向、對齊、間距、換行幾個屬性，組合起來就足以應付網站上大多數常見的版面。
把 Elementor 容器的方向、對齊、間距、換行、巢狀、Grid 這幾個屬性搭配著用，幾乎能撐起一個網站大多數的版面需求，剩下的多半是熟練度問題，多排幾次自然會有手感。版面骨架搭穩之後，接下來要練的是讓同一套排版在各種裝置上都好讀，那又是另一層要磨的功夫，值得再花時間練習。