響應式網格系統
目的
Responsive Grid System 技能為在網頁上組織內容提供了結構化的基礎。透過使用一致的欄位、間距和邊距，此系統確保視覺對齊、維持層級，並簡化設計在不同螢幕尺寸（行動裝置、平板電腦、桌上型電腦）之間的轉換。
使用案例
- 設計新網站或應用程式的結構佈局。
- 建立 UI 套件或設計系統元件庫。
- 組織儀表板或資料密集型介面等複雜內容。
- 確保跨多個頁面的垂直節奏和水平對齊保持一致。
何時不應使用
- 實驗性/野獸派設計： 當視覺目標是為了藝術效果而故意打破標準佈局慣例時。
- 單一用途的簡單頁面： 當內容非常少（例如，單個置中表單）時，完整的網格系統會增加不必要的開銷。
- 固定寬度環境： 當輸出嚴格用於非響應式媒介時（儘管網格對於對齊仍然有用）。
輸入
要建立響應式網格系統，您需要：
- 裝置中斷點： 版面變更的螢幕寬度（例如 600px、900px、1200px）。
- 欄位數量： 每個中斷點用於內容的垂直軌道數（標準：桌上型電腦為 12，行動裝置為 4）。
- 間距寬度： 欄位之間的空間（例如 16px、24px）。
- 外邊距： 視窗左右邊緣的內距（例如，行動裝置上為 20px，桌上型電腦上為 5% 或固定的最大寬度）。
- 內容需求： 元件列表及其相對優先順序/大小。
輸出
- 網格規範： 每個主要中斷點的欄位、間距和邊距定義。
- 佈局圖： 視覺或描述性指南，顯示元件在不同大小下如何跨欄。
- 實作邏輯： 實現系統的 CSS（Grid 或 Flexbox）屬性。
工作流程
1. 定義中斷點
選擇版面需要調整的關鍵螢幕寬度。 常見規模：
- 行動裝置： 0 - 599px
- 平板電腦： 600px - 899px
- 桌上型電腦： 900px+（最大寬度容器約為 1200px-1440px）
2. 設定欄位與間距參數
決定網格的「內部邏輯」。
- 行動裝置： 4 欄，16px 間距，16px 邊距。
- 平板電腦： 8 欄，24px 間距，32px 邊距。
- 桌上型電腦： 12 欄，24px 間距，自動邊距（置中容器）。
3. 建立容器行為
決定網格是流體（按視窗百分比縮放）、固定（在到達下一個中斷點前保持特定寬度）還是適應性（混合型）。建議： 使用具有固定 max-width 的流體網格，並使用 clamp() 設定大小（例如 max-width: clamp(320px, 90vw, 1440px)），以便容器平滑縮放，而不是在中斷點處跳躍。
4. 將內容對應到網格
使用 CSS Grid（grid-template-columns: repeat(12, 1fr) 搭配 grid-column: span N），而不是 float 或 inline-block 技巧，將元件分配給特定的欄位計數。
範例： 在桌上型電腦上（12 欄網格），側邊欄可能跨越 3 欄，而主要內容跨越 9 欄。在行動裝置上，兩者都會跨越所有 4 欄（堆疊）。
對於嵌套在網格單元格內、需要與父網格軌道對齊的元件（例如，卡片內部頁首/主體/頁尾與同級卡片對齊），請使用 subgrid（grid-template-columns: subgrid 或 grid-template-rows: subgrid），而不是重新宣告一個新的獨立網格。
當元件的內部佈局取決於其自身可用空間而非視窗時（例如，應根據其容器寬度而非螢幕從 1 列重新排列為 2 列的卡片），請使用容器查詢（在包裝器上使用 container-type: inline-size，在子元素上使用 @container (min-width: …) ），而不是媒體查詢。
5. 定義堆疊與排序
決定元素在螢幕縮小時的移動方式。通常，左側的元素會堆疊在右側元素之上。使用邏輯屬性（margin-inline、padding-block）來設定網格間距和邊距，以便系統無需單獨的覆寫即可正確適應從右到左（RTL）的佈局。
決策規則
- 12 欄規則： 在桌上型電腦上使用 12 欄網格，因為它可以被 2、3、4 和 6 整除，提供最大的靈活性。
- 一致性： 在單個中斷點內使用相同的間距寬度，以保持對齊。
- 行動裝置優先： 始終先設計 4 欄的行動裝置佈局，以確保優先處理核心內容。
- 「安全區域」： 確保外邊距足夠大，以防止內容在行動裝置上觸碰到螢幕邊緣。
- 視窗 vs. 容器： 對於頁面層級、由視窗驅動的佈局變化（例如整體欄位計數），請使用媒體查詢。當元件必須根據其自身框大小（無論視窗大小如何）進行調整時（例如，同一卡片元件在側邊欄與全寬區塊中重新排列方式不同），請使用容器查詢。
限制條件
- 無障礙性： 確保當欄位縮小時，文字保持可讀性，且點擊目標（按鈕）保持足夠大 — WCAG 2.2 (2.5.8) 設定了 24x24px 的絕對下限，主要操作建議為 44x44px。
- 響應式： 任何元素的固定像素寬度都不應超過行動裝置視窗寬度（避免水平捲動）。
- 層級： 使用網格來強化重要性；較重要的元素通常應跨越更多欄位或出現在堆疊中較高的位置。
常見失敗模式
- 不一致的間距： 在不同欄位之間使用不同的間距，破壞了視覺上的「線條」。
- 無間距設計： 將內容直接緊鄰放置，沒有呼吸空間（除非是影像的刻意設計）。
- 過度複雜： 為微小的調整建立過多的中斷點，導致 CSS 難以維護。
- 忽略「中間狀態」： 僅在 320px 和 1440px 進行測試，而忽略了在 800px 或 1024px 時的佈局表現。
驗證標準
- 內容與網格的垂直線條完美對齊。
- 在任何 320px 到 2560px 的視窗寬度下，都不會出現水平捲軸。
- 中斷點之間的過渡感覺合乎邏輯，且內容保持可讀。
- 間距和邊距在整個頁面保持一致。
- 系統使用相對單位（%、fr、rem）而非寫死的像素來實作欄位寬度。
- 對於佈局應取決於其自身框大小的元件，使用容器查詢（而不是視窗媒體查詢）。
- 點擊目標至少滿足 WCAG 2.2 的 24x24px 最小值。