使用网格

容器

容器是一个固定宽度的元素,它包裹着您网站的内容。它保持一个固定的尺寸,并使用边距进行居中。容器是将页面内容居中到网格中最简单的方法。

文本容器

有时您只需要在页面上放置一列居中的文本。一个文本容器是一种特殊的容器类型,它针对单列流动文本进行了优化,例如本页上的这些说明。

文本容器不需要使用网格,可以帮助简化基本的页面布局。

网格内容

列流动

网格不一定需要指定行。如果您将作为ui 网格的直接子元素,内容将在当前行中的所有网格列都被占用时自动流向下一行。

清除行

添加行包装器可以让您手动指定您想要开始新行的位置。

指定行宽度

指定网格列数将把列分成预定列数的行。其他列将自动流向下一行。

指定列宽度

您也可以分别为每个列指定列宽度

四列宽
八列宽
四列宽

特殊变体

一些特殊变体将网格格式化为表格,需要您指定行。例如,一个分割网格或一个单元格网格需要行包装器。

单元格网格
内部单元格网格
分割网格
垂直分割网格

调整网格

居中内容

如果一行没有占满十六个网格列,您可以使用ui 居中网格居中行居中列将列内容居中到网格内。

浮动行

由于 Semantic UI 的网格基于 flex 盒模型,所以左浮动元素应该放在其行的第一个位置,而右浮动元素应该放在其行的最后一个位置。

左浮动
右浮动

文本对齐

您可以使用网格、行或列级别的对齐变体指定文本对齐。

右对齐列
左对齐列
居中对齐行
居中对齐行
右对齐列

垂直对齐

您可以使用网格、行或列级别的垂直对齐。

等宽列

指定一个等宽网格将自动确定列大小,以便均匀地适合一行内。

响应式模式

加倍

您可以将列设置为在每个设备跳转时加倍宽度。

可堆叠

您可以将列设置为在移动设备上堆叠。

响应式宽度调整

您可以指定列在不同屏幕上显示不同的宽度。

指定设备可见性

您可以指定列仅在特定屏幕上显示。

仅电脑显示十列宽
仅电脑显示六列宽
仅移动设备显示十六列宽
仅电脑显示行
仅电脑显示行
仅电脑显示行
仅移动设备显示列
仅移动设备显示列