8px基本单元
我们的网格系统围绕8px的基本单元构建。这个基本单元决定了所有元素排版布局、间距比例，尺寸大小，并确保了产品之间的视觉一致性。
其基本原理是将设计元素按照二分或倍增的方式进行排列，以形成统一的视觉节奏。在不同断点的情况下，尺寸和间距的变化是一致且匹配的。这一规范的目的是实现网格布局的灵活性和一致性。
排版布局
列和行是实现视觉节奏和排版一致性的关键。它们提供了可靠的基准线，使得排版元素能够在页面上有序地布局，并在不同设备和屏幕尺寸下呈现出良好的可读性和美观性。
外边距
外边距始终是断点内的固定大小，即使列是流动的。有关边距大小表，请参阅断点。网格外边距在断点内始终是固定尺寸，即使列是流动的。请参阅断点表以获取边距尺寸的信息。
内边距
内边距始终是基本单元的固定倍数：在所有标准断点处为16像素。始终将文本与盒子内边距的边缘对齐。请注意，某些设计工具默认会给文本框添加内边距；如果需要，检查文本框的内边距并将其删除。
网格间距
当页面内容较多需要分区块展示时，使用网格间距，每个容器网格框周围的边距与其填充物应该相匹配，总间距为16px。
请注意，一些设计工具默认向文本框添加内边距；检查文本框的内边距，需要将其移除。
断点
我们通过这组标准断点来保持跨屏幕尺寸的布局完整性。为了获得最佳结果，可以在每个标准zai点上测试设计和代码)
断点尺码表
网格响应方式
在用户界面中，屏幕尺寸由设备和用户选择的窗口大小决定。我们可能事先知道内容，或者内容可能是动态的。 特别是在显示动态内容时，要仔细考虑用户对其屏幕空间的目标。如果用户的目标是查看更多的项目，则通过平铺固定框来调整列数。如果用户想要在每个项目中查看更多的内容，则调整框的大小并使用固定列数。
流动网格（Fluid Grid）
- 根据屏幕大小和分辨率的变化自动调整网格的尺寸和排列。
- 空间被等分为多个均等的列。
- 列数保持不变，但列的宽度会根据屏幕大小进行调整。
- 适用于响应式设计，能够在不同设备和屏幕尺寸上呈现一致的布局。
固定网格（Fixed Grid）
- 网格的列数和列宽是预先确定的。
- 利用固定单位大小来构建布局，如固定尺寸的盒子。
- 不会根据屏幕大小自动调整网格尺寸，适用于特定的布局需求。
- 可以精确控制元素的尺寸和位置。
混合网格（Hybrid Grid）
- 混合网格结合了流体网格和固定网格的特性。
- 可以在实践中灵活使用，根据需要选择不同的布局方式。
- 混合盒子具有流体网格和固定网格的特性，可以根据具体情况灵活调整。
决策树
- 流体网格适用于响应式设计，可以根据屏幕大小自适应调整布局；
- 固定网格适用于需要精确控制尺寸和位置的布局；
- 混合网格可以根据实际情况选择合适的布局方式。
以下是常见组件界面响应方式：
间距
在8px基本单元的基础上，我们间距系统的主要基础是间距刻度。此尺度是一组有限的间距值，用于以一致的方式布局UI元素。
每个间距值都是基本单位的倍数，范围从0px到80px不等，以允许灵活性，同时仍然保持不同布局的一致性。
间距使用
不同的用例需要不同范围的间距单位才能达到最佳效果。我们的间距刻度可以分为三个不同的尺寸范围：
S
对小型和紧凑的UI使用值（0至8px）。
- 小图标和文本之间的间隙
- 小组件（即徽章、图标按钮、表格单元格）的容器填充
- 重复元素（即按钮组）之间的间隙
- 输入组件内的填充
- 卡片中元素之间的垂直间距（即标题和描述、描述和操作）
- 触发器和提升元素之间的间隙（即下拉按钮和菜单之间）
M
（12至24px）用于更大和更密集的UI。
- 较大组件（即按钮）的容器填充
- 头像/大图标和内容之间的空间（即部分消息）
- 卡片中元素之间的垂直间距
- 包装密度较低或组件较大的物品之间的间距
L
将值（32至80px）用于最大的UI组件和布局元素。
- 页面上内容之间的空格（即页面顶部和标题之间的间距）
- 在更大的内容中对齐（即在标志中对齐内容）
尺寸
我们提供了适用于固定和流动尺寸的尺寸刻度。使用它来调整内容的大小以及负空间的大小。就像字体刻度一样，尺寸刻度限制了大小的范围，以改善一致性和节奏，同时仍然允许广泛的尺寸范围。
固定基本单元
流动基本单元
对于流动网格，列宽是流动的，随着屏幕尺寸、窗口大小变化。就像一个框可以跨越多列一样，它的高度是列宽的倍数。使用情况包括网页中的主要部分、分割的编辑内容部分、模态框等。请查看断点表以获取像素尺寸。
缩放倍数
在确定了基准尺寸之后，根据需要进行相应基准的倍数缩放，保持一个高宽比；
高宽比
在调整容器或组件的尺寸时，尽可能地将尺寸约束为下面显示的长宽比之一。这样做可以增强产品之间的统一感知。
据需要在每个维度上乘以基准单位来设置宽度和高度，保持纵向或横向的比例：
例如，要调整一个具有1:2长宽比的流动容器的尺寸，你可以将其宽度跨越2列，高度为4个列宽。要调整一个相同高宽比的固定盒子的尺寸，你可以从80像素的基准单位开始，然后将宽度乘以2，高度乘以4，得到一个固定盒子尺寸为320乘160像素。
组件
组件可以像其他容器一样调整尺寸，固定或流动的，通常是混合的，高度固定，宽度随窗口流动。
当多个组件坚持相同的规模时，布局会自然会出现形网格秩序感。例如，当内部间距一致时，垂直对齐复选框和单选按钮等表单字段会产生网格效果；
