Web、UI與CSS
用 Flexbox 與 Grid 排列等間距卡片
使用工具
三張卡片可能最後一張掉行，或長 URL 撐寬容器。先別不斷縮卡片寬度，應確認父容器的配置機制。Grid 適合明確行列關係，Flexbox 適合沿一個方向安排項目，可用預覽逐項觀察。
先做三欄與 16px 間距
選擇 Grid、三欄、一行、間距 16、預覽三項。repeat(3, minmax(0, 1fr)) 平分扣除間距後的空間。內部可用寬 960px 時，兩個間距占 32px，剩 928px 分三欄，不是先三等分百分比再加間距。
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;預覽改五項時，第二行放兩項；改兩欄則有三行。行數設定定義明確軌道，不是項目上限。不要只測試剛好三項，也看四、五項如何繼續排列。
切換 Flexbox 後關注點不同
Flexbox 可試 row/column 方向及兩軸對齊。輸出含 flex-wrap:wrap，但不自動得到等寬三欄，子項寬度與 flex-basis 會影響容納數量。產生的是父容器配置，不是完整替換卡片樣式。
space-between 分配剩餘空間，末行僅兩項時可能拉得很開。需要跨行欄位置一致可考慮 Grid，工具列自然寬度項目可試 Flexbox。按對齊關係而非技術新舊選擇，能減少後來補例外。
短範例看不出長內容問題
等寬方塊排好後，要放入長標題、不易斷行 URL、圖片和兩行按鈕。minmax(0, 1fr) 允許軌道縮小，但不是子內容自動換行的萬能設定。應找出要求寬度的內容，再對該部分設定換行或內部捲動。
align-items:stretch 可對齊同行外框高度，但不自動對齊卡片內按鈕。外框尺寸與內部排布是兩層問題，先看父層行欄，再調內部縱向和留白，不要用父層 gap 反覆修子內容問題。
優先可讀欄數而非固定三欄
有側欄時，1440px 螢幕並不提供同樣寬的卡片區。應量測實際父容器，確認文字與控制項容納，窄時改兩欄或一欄。工具不自動產生整套媒體查詢，需將基礎 CSS 接入網站寬度規則。
縱向排列往往比縮字和縮間距硬塞三欄更好。檢查約 320px、縮放和長翻譯有無整頁橫向溢出；程式碼或寬表應在自身區域處理。改欄數不等於隱藏資訊。
保持視覺與閱讀順序一致
row-reverse 或 column-reverse 改視覺配置，不一定改變文件順序。要檢查 Tab 與朗讀是否和視覺一致。美觀與易理解操作都重要，大幅 CSS 重排前先考慮來源文件順序。
依次試三項基礎、五項換行、真實長文、窄寬欄數，最後鍵盤操作。一次全改會失去因果。先做最小配置，再逐項加回真實條件，就能區分父寬、間距與子內容造成的問題。
從相同方塊進一步測試不同內容
三欄預覽整齊後，在實際實作中測試長標題、大數值、多按鈕。短編號方塊看不到換行和高度差，外層對齊也不自動對齊卡內按鈕。產生 CSS 是外部版面起點，不是完整卡片實作。
長 URL 或不換行程式碼可能撐破正確欄寬。全隱藏 overflow 會丟必要內容，應讓本文換行、程式碼表格使用有標籤的內部捲動，並查頁面整體橫向溢出。短範例能放下不證明長使用者內容也可以。
依次檢查寬螢幕、側欄後的實際空間、窄螢幕堆疊、文字放大和鍵盤順序。CSS 視覺重排可能與 Tab 不同，要確認所有操作可達。間距、欄數與閱讀順序互相關聯，應回實際資料畫面測試，不是貼完宣告就結束。