Layout 佈局

用 24 欄柵格快速切出頁面版型。使用 Element Plus 的 el-row(列)與 el-col(欄),底層是 Flex。

設計準則

• 一列共 24 欄,同一列各欄的 span 加總為 24
• 欄與欄的間距用 el-row 的 gutter,常用 16 或 20;不要在欄裡自己加左右 margin
• 需要留白時用 offset(往右推移欄數),不要用空白欄硬湊
• 水平分佈用 justify、垂直對齊用 align,交給 Flex 處理
• 需要隨螢幕寬度變化時用響應式屬性(xs/sm/md/lg/xl)
• 頁面外框架構(頁首、側邊、主內容)請改用 Container 佈局容器;柵格用於內容區塊的分欄

基本佈局

同一列的 span 加總為 24:

loading

分欄間隔

gutter 指定欄與欄之間的間距:

loading

混合佈局

不同 span 混搭出主次欄、多欄工具列等常見版型:

loading

欄偏移

offset 讓欄往右推移指定的欄數,用來留白:

loading

對齊方式

justify 控制水平分佈(欄加總小於 24 時才看得出差異):

loading

響應式佈局

用 xs/sm/md/lg/xl 讓欄寬隨螢幕寬度變化。請拉動瀏覽器寬度觀察:

loading

斷點:xs < 768px、sm ≥ 768px、md ≥ 992px、lg ≥ 1200px、xl ≥ 1920px

Do / Don't

✅ Do	❌ Don't
同列 span 加總 24	加總超過 24 導致換行錯位
用 gutter 做欄間距	在欄內自己加左右 margin
用 offset 留白	塞空白欄硬湊位置
頁面框架用 Container	用柵格硬兜整頁 header/aside

給工程師

• el-row props:gutter(欄間距)、justify(start/center/end/space-between/space-around/space-evenly)、align、tag
• el-col props:span(0–24)、offset、push、pull、xs/sm/md/lg/xl(數字或物件)、tag
• 完整 API 見 Element Plus Layout 文件。本站規範優先於 EP 文件中的視覺建議。