網格系統和模塊化

1）為什麼網格

• 加快設計和開發（通用語言：「12列，gutter 24」），
• 減少認知負荷（水平節奏,穩定線條）,
• 提高了組件在頁面之間的可移植性，
• 允許在沒有「微堆棧」的情況下構建模塊化庫。

2）基本網格元素

容器-最大內容寬度,中心區域。
揚聲器-用於放置模塊的垂直區域。
Gutter是列之間的水平間隙。
Margin-容器左側/右側的外部字段。
Row/Track是水平指南（在CSS Grid中-行/軌道）。
基線是垂直印刷網格。

推薦的垂直節奏：8-pt（有時細微差別4-pt），尺寸單位和縮進是4/8的倍數。

3）Breakpoint和容器

• 容器是位圖（fix。max-width）在大屏幕上，fluid在移動上。
• Gutter可以平穩地增加到大的破折號。
• 這些欄是4/6/8/12作為"；基本組合"；。

4）模塊化和密度

模塊是一個內容塊，占據了1..N列和基線高度的倍數。

• Comfort （dashbords, reading）：大於字體，縮進為16-24。
• Compact（表格、專業模式）：字體+0/ − 1 px，垂直縮進− 4/ − 8，行高度固定（倍數8）。

組件必須具有兩個最小密度預設。

5）印刷和基線網格

選擇基本線路（例如24 px）並同步元素高度（px 40/48/56按鈕是基線的倍數）。
標題固定垂直節奏：上方/下方的縮進是8的倍數。
圖標與文本的頂點對齊。

6）布局模板

6.1張卡片（卡片）

網格：馬賽克（fix。卡的寬度）或柱子（卡=N列）。
最低內容高度，以避免下載時「跳躍」；卡片內的skeleton。
內部打字：16/20/24取決於斷路器。

6.2表格

整個寬度的容器；在水平滾動時凍結第一列/頂蓋。
細胞是基線倍數；數值列按位/小數對齊。
如果列太多,XS上是「紙牌行」（堆叠布局）而不是水平滾動。

6.3表格

XS/SM上的單音，MD+上的雙音或三音（考慮禁忌/部分邏輯）。
字段+標簽+輔助文本堆疊在公共模塊中（高度是8的倍數）。

6.4 Dashbords

帶有固定軌道和雲層（區域）的網格以保持穩定。
小部件在列中具有最小和最大寬度；高度是基線的倍數。
當重新分配時-揚聲器中的數值會發生變化，而不是隨意細分小部件。

7）適應性，自動布局和行為

網格前面的內容：網格調整為內容而不是打破。

Figma/Auto-layout:

使用constraints （left/right/center）和自動排列卡片/列表。
支持XS/SM/MD/LG的組件變體（更改插槽、插槽順序）。

CSS:

分區級別是CSS網格（區域，列，行）。
組件內部為Flex（軸、空格平衡）。

8） CSS Grid/Flex-講習班

css
.container {
max-width: 1280px; margin: 0 auto; padding: 0 16px;
display: grid; gap: 24px;
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.col-4 { grid-column: span 4; }
@media (max-width: 1199px) {
.container { grid-template-columns: repeat(8, 1fr); gap: 20px; }
.col-4 {grid-column: span 8; }/full-width card/
}
@media (max-width: 839px) {
.container { grid-template-columns: repeat(6, 1fr); gap: 16px; }
}
@media (max-width: 599px) {
.container { grid-template-columns: repeat(4, 1fr); }
}

css
.dashboard {
display: grid; gap: 24px;
grid-template:
"kpi kpi chart chart" auto
"tbl tbl chart chart" 1fr / 1fr 1fr 1fr 1fr;
}
.kpi  { grid-area: kpi; }
.chart { grid-area: chart; }
.tbl  { grid-area: tbl; }
@media (max-width: 1199px) {
.dashboard { grid-template:
"kpi" auto "chart" auto "tbl" 1fr / 1fr; }
}

9）撤退和代幣

在設計系統中捕捉規模。

json
{
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32, "3xl": 48 },
"container": { "sm": 584, "md": 808, "lg": 1152, "xl": 1320 },
"gutter": { "sm": 16, "md": 20, "lg": 24, "xl": 32 },
"columns": { "xs": 4, "sm": 6, "md": 8, "lg": 12 }
}

• 組件的內部縮進來自「空間」。
• 集裝箱的外場來自「gutter」/「margin」。
• 元素高度是8 （40/48/56）的倍數。

10）模塊化組件

• 知道他在每個斷路線上需要多少專欄；
• 最小/最大尺寸；
• 不依賴「魔術」像素-僅代幣；
• 將內部網格（標題、內容、腳）保持在基線上。

11）圖像和媒體匹配

記錄預覽和卡片的aspect-ratio（例如16/9、4/3、1/1）。

css
.media { aspect-ratio: 16 / 9; object-fit: cover; }

在XS上，僅使用全光澤（邊緣圖片）進行促銷，其余內容遵循容器。
圖像中的文本僅在專欄/覆蓋物上，與AA ≥對比。

12） RTL和本地化

網格方向鏡像："dir="rtl"和"：dir（rtl）"-用於縮進/圖標。
表格中的列順序和「粘性」區域（frozen columns）-考慮鏡像。
行長度和承載可以改變模塊的高度-放置空格。

13） iGaming的細節

促銷區和橫幅：帶有大型模塊的獨立烤架；文本總是在標註上，AAA對應於負責任的通知（18+，限制，風險）。
領導者/排名：帶有固定第一列和粘貼帽的表，數字表（tabular-nums），行高度是8的倍數。
玩家/操作的行列板：小部件（會話，存款，RTP，Net Deposits）在12架上占據3-6列；在MD/SM上重建級聯。
錦標賽卡：3 × N （LG）、2 × N （MD）、1 × N （SM/XS）卡網格；CTA在永久位置。

14）可用性和重點

焦環不應打破節奏：添加外部或內部偽電容。
最小集團規模：44 × 44（暴民）/32 × 32（臺式機）。
不要僅通過放置來編碼含義；保存文本標簽和aria屬性。

15）生產力

降低網格嵌套深度：內部有1個主網格部分+變形。
避免在數百張卡片上戴上嚴重的陰影/口罩；使用列表中的「平面」樣式。
懶惰地下載媒體內容；固定比例可防止CLS。

16）反模式

每頁的「網格味道」→一致性崩潰。
Gutter按部分任意更改。
密度不一致（在單個屏幕中，「CD」和「舒適度」）。
依賴於魔法輪胎的組件（無專欄/令牌）。
在移動時帶有水平滾動表的表沒有其他布局。
圖像中的文本沒有條紋和對比度控制。

17） QA支票清單

結構

• 柱/容器/錳對應於破折號。
• Gutter在頁面內穩定。
• 高度和縮進的倍數為8。

元件

• 定義了柱寬度（XS.. XL）和min/max。
• 內部網格與基線一致。

表/表格

• Sticky帽/第一列；XS上的堆叠模式。
• 形狀字段是基線的倍數；標簽/輔助文本不是「跳躍」。

A11y

• 焦點樣式不會破壞節奏；點擊區域≥最小。

表演表演

• 由於媒體塊，沒有CLS；啟用了懶惰下載。

18）設計系統中的令牌和文檔

• 「container」，「columns」，「gutter」，「space」，baseline的含義；
• 布局示例（卡/表/表格/dashbords）；
• 密度預置（Comfort/Compact）及其對組件的影響；
• CSS Grid/Flex和Figma樣式/亮點代碼。

簡短摘要

網格是設計和開發之間的契約。記錄斷路器、容器、揚聲器和8-pt節奏，設計令牌和布局模式，提供密度、適應性和可用性選項。然後，頁面可以預測地縮放，組件可重復使用，團隊的工作速度更快，更穩定。