AUO Design System

概述

網格系統是所有視覺元素的基礎，為排版、元件和頁面佈局提供系統性的架構與指引，並簡化設計到開發的溝通。AUO Design System 採用網格系統來建立一致且具有條理的視覺佈局。

尺寸規範

AUO Design System 採用 12 欄網格系統。欄與欄之間的間隔 (Gutter) 設為固定值 (公式：(16+8n) px，n 為自然數)，瀏覽器寬度在一定範圍內變化時，欄寬會隨之調整，但間隔保持不變。

使用網格系統時，請遵循以下原則：

• 偶數思維：建議圖片、元件等元素的寬度設定為偶數欄寬，以維持佈局的平衡和諧。
• 區塊定義：定義區塊的起始和結束位置時，應以欄為單位，例如一個區塊從第 3 欄開始，到第 8 欄結束。
• 欄數限制：每列 (Row) 的總欄數必須為 12 欄，以確保佈局的完整性。