网格系统和模块化

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节奏，设计令牌和布局模式，提供密度、适应性和可用性选项。然后，页面可以预测地缩放，组件可重复使用，团队的工作速度更快，更稳定。