Elementor裡幾張卡片擠在同一排，先查它們共同父容器的Direction與Wrap。Direction決定排列方向，Wrap決定項目是否能另起一行。只把每張卡片的寬度改小，可能暫時放得下，卻沒有處理原本應該換行的需求。
下面比較同一容器的No Wrap與Wrap。實際前台在No Wrap時把六個子項目放到同一排，部分項目會縮小；開啟Wrap後，項目保留較大的尺寸並分到多行。這不是「No Wrap一定超出邊界」的保證，因為結果還受項目寬度、收縮與內容限制影響。
選共同父容器，先看Direction
本例使用WordPress 7.1.2、Elementor Free 4.3.3及Twenty Twenty-Five，頁面版型為Canvas，選的是傳統Container。新版另有Atomic Elements，本文不把它們的控制面板混在一起。先從Structure確認標題、圖片與按鈕都屬於同一個父容器，再進入它的Layout。
Direction的Row讓項目沿水平方向排列，Column則沿垂直方向排列。你若只是想讓每張卡片各占一列，可以先評估Column；若桌面想排成多欄、空間不足時另起一行，才需要一起看Row與Wrap。方向與換行是兩個不同選擇。
不要只選中卡片裡的Heading，然後在它的Advanced加大左右margin，期待整組卡片自動換行。個別元件的留白和父容器的排列規則不同，改錯層級容易讓一個位置看似正常，另一個寬度卻出現新的擠壓。
No Wrap可能讓項目收縮
本例父容器內容寬度為1140px，Direction是Row，gap保持40px。No Wrap時，六個子項目的頂端都在同一個y位置。第一個Heading寬度約168.19px，圖片約345.47px，按鈕約58.17px；它們在同一排參與分配可用空間。
因此，畫面沒有水平捲軸，不代表排版已經適合閱讀。標題被壓得很窄、按鈕文字換成好幾行，也可能是單排安排的結果。檢查時應看內容是否仍清楚，而不是只把「沒有溢出」當作完成標準。
反過來，如果項目有無法再縮小的最小尺寸，No Wrap也可能產生溢出。這是應依實際內容核對的條件，不能把本例的收縮數字直接套到另一張圖片、另一套字型或固定寬度卡片。
Wrap允許另起一行，不指定每行幾張
接著在同一個父容器把Wrap改為允許換行，其他比較條件保持不變。儲存後前台仍是1140px、Row與40px gap，但六個子項目不再全部擠在同一排。第一個Heading寬度約498.53px，第二個約329.20px；後方項目陸續排到下一行。
這次圖片本身約1024px寬，所以它占了獨立一行。這提醒我們，Wrap不是自動建立三欄卡片的開關。如果希望三張卡片各有自己的標題、圖片與按鈕，應先把每張卡片內容分組到各自的子容器，再規劃子容器的寬度。
換行允許的是更多列，不會自動替你把所有項目變成相同寬度。要每行兩張或三張，需要一起考慮項目寬度與gap。不能只填兩張各50%寬，再另外加一段gap，卻仍期待它們一定放在同一行。
先算項目寬度，再留出gap
官方容器Layout說明以47.5%項目寬度加5% gap示範兩項安排。這是同一行要同時容納項目和間距的概念，不是所有版面的固定設定值。你若用像素gap，或卡片還有邊框與其他寬度條件，應依實際可用空間重新核對。
也要分清Container的Content Width和整個頁面的寬度。本例1280px預覽中，容器內部內容只有1140px；換行要依這個容器的可用空間判斷。不能拿整個視窗寬度除以三，就認定每張卡片可以使用那個結果。
如果你的卡片需要固定比例，可以先選合適的寬度安排，再在窄視窗改成較少欄。不要單靠內容剛好比較短，讓目前這一組看起來能放下；增加標題或換一張圖後，版面可能立刻變得不同。
窄視窗再核對裝置控制
容器的Direction與Wrap可能有響應式控制。修改前先看目前編輯的是桌面、平板還是手機，確認沒有把只想在手機使用的Column寫到桌面。沒有另行覆寫的裝置也可能沿用較大裝置的值，應以實際控制與前台樣式判斷。
本例比較的是1280px前台的兩個狀態，不把它說成已驗證所有手機。你在自己的頁面應儲存後再看窄視窗，確認每張卡片完整、按鈕仍容易操作、長文字沒有把卡片撐出邊界，且排列順序仍符合閱讀流程。
不要為了讓視覺順序好看，隨意使用反向排列後就忽略內容順序。Direction的Reverse選項會改視覺呈現，維護者仍要核對實際頁面和操作流程。若目的是修改資訊順序，先確認是否應直接整理內容結構。
每次只改一個排版條件
排查時先記下父容器、Direction、Wrap、gap與主要項目寬度。先確認方向，再比較換行，最後處理尺寸；不要同時改五個值，因為結果變好了，也不容易知道是哪個條件真正起作用。
儲存後重新開啟前台，確認不是只看編輯畫布的暫時結果。若卡片仍擠壓，沿父容器查看寬度限制及子元件的最小尺寸，再決定是否調整分組。先整理排列規則，比用負margin硬把項目拉回畫面更容易長期維護。
先分組卡片，再安排整排
如果一張卡片有標題、圖片與按鈕，應讓這三個元件屬於同一個子容器，再把多個卡片容器放到共同父容器。如此父層換行的是整張卡片，卡片裡的按鈕不會因為自己成為父層的獨立項目，而跑到另一排。
本例故意把不同元件放在同一父容器，便於看清Wrap依實際項目尺寸分行的結果；它不是完整服務卡片模板。如果照著數字做卡片，卻沒有建立相同分組，視覺結果當然可能不同。先理解哪個元素是一個排列單位，再決定方向和尺寸。
這種分組也方便之後修改單張卡片背景或內距，不必逐個元件重複補留白。父層負責卡片之間的排列，子層負責卡片內部內容，維護時較容易找到應調整的位置。
評論0