网格

网格用于在布局中协调负空间

网格

网格是一种结构，具有 悠久的历史，用于对齐设计中的负空间。

使用网格使内容在页面上更自然地流动。

列

网格将水平空间划分为不可分割的单位，称为“列”。网格中的所有列都必须指定其宽度，作为总可用行宽度的比例。

所有网格系统都选择任意列数以允许每行。语义的默认主题使用 16 列。

下面的示例显示了在第一行中将适合四个 四列宽 列，16 / 4 = 4，以及第二行中三个不同大小的列。2 + 8 + 6 = 16

可以通过调整语义 UI 的底层 主题变量 来更改默认列数以及网格的其他任意特性。

行

行是水平对齐的列组。

行可以是 显式 的，用额外的 row 元素标记，也可以是 隐式 的，当先前行中没有更多空间时自动出现。

在每组列之后添加垂直间距以分隔每组列，从而创建垂直节奏。

自动流动

大多数网格不需要指定行。当当前行中的所有网格列都被占用时，内容将自动流到下一行。

列宽度

列宽度可以使用 (x) 列宽 类名指定。如果列无法适应一行，它将自动流到下一行

分组

行包装器允许您将变体应用于一组列。

清除内容

行包装器将自动清除先前的列，这在使用 浮动 变体时非常有用。

自动列数

等宽 变体将自动平均划分列宽度。这在您事先不知道列数的动态内容中非常有用。

居中内容

如果一行没有占用所有十六个网格列，则可以使用 居中 变体将列内容在网格中居中。

容器

可以使用 容器 与网格一起使用，以提供响应式、固定宽度容器来包装页面内容。

可堆叠

可堆叠网格 将自动将行堆叠到移动设备上的单列

加倍

加倍 网格将为每个设备跳跃将列宽度加倍。

手动调整

虽然 加倍 或 可堆叠 等设计模式有助于简化响应式样式，但您也可以通过指定 (x) 列宽设备 或 仅设备 列或行来手动调整设备显示。