空间模块使我们能够为尺寸和间距计算定义严格的规则，而网格则有助于将内容结构化为视觉上组织良好的块。我们使用 12 列、8 列和 4 列的网格，可以将选定的区域划分为二等分、三等分和四等分。

§网格结构

列 ➊ 定义了水平对齐的边界；间距 ➋ 提供了网格列之间的填充；外边距 ➌ 确保了容器 ➍ 的填充和居中对齐。网格列的宽度由百分比值决定，默认列间距设置为 20px。

§容器

容器是系统设计中的一个基本组件，它在给定的视口内包含和组织内容。我们使用两种类型的容器：固定宽度容器（这意味着其固定的最大宽度可以在每个断点处更改）和流体宽度容器（具有可变宽度，占据可用空间的 100%（S、XS 和 2XS 尺寸除外））。

§断点

媒体查询断点，或简称断点，是预定义的视口宽度，允许您管理各种网格设置。

§排除区域

在 UI 设计布局中，用户期望某些元素位于特定区域。我们将这些区域称为“排除区域”，并且不将它们包含在我们的网格系统中。当灵活面板或导航面板扩展时，内容和网格会被压缩以适应浏览器，或者超出浏览器范围。叠加面板会覆盖内容，而不会影响主容器。