菜单

网格
网格是用来协助空间布局的

下载

介绍

网格 (Grids)

网格是一种具有 丰富历史 的结构,在你的设计中用来布置周围空间。

网格的使用能使你的内容自然的显示页面中,而且能够迅速的根据元素的大小来自动重新调整布局。

列 (Columns)

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

所有网格系统每行有任意列,Semantic 默认主题有 16 列.

下面的例子是第一行显示 四个列16 / 4 = 4第二行显示三个不同宽度的列, 2 + 8 + 6 = 16

默认的列的个数,可以通过修改 Semantic UI 的 主题变量 参数来修改。

行 (Rows)

行是水平排列的列组。

行可以是 显式 的,标记为一个额外的 元素,或 隐式的,当前面没有更多的空间时,自动转换。

槽 (Gutters)

网格的列由空白区分离,被称为“槽”。槽可以用来增加可读性,显示元素和元素之间的实体周围的空间

槽保持恒定大小的网格宽度。你可以用一种 宽松式网格,来增加一个网格的槽的大小。

负边距 (Negative Margins)

因为所有的网格列包括槽, 网格使用 负边距 第一列和最后一列之外的内容能在页面刷新的时候显示。

在下面的例子中你可以发现,虽然最上面一行有内边距,但 附属按钮 仍能在网格的边上得到刷新。

在某些情况下,当行或者列是 有颜色的,你可能希望避免使用负边距。你可以使用 padded grid 这个变量。

在网格前面的按钮
在网格后面的按钮

页面网格 (Page Grids)

网格是流体,将自动的采取最大可用宽度。

容器 是根据用户的屏幕大小来限制页面内容到合理的最大宽度的元素。

使用 ui grid container 是在网格中包含顶层网页内容的最好方法。

在 Semantic UI 1.x 版本中, page grid 用来包含网格页面内容的最大宽度。现在网格已经不赞成使用简单的 container 元素。

自动流动 (Automatic Flow)

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

列内容 (Column Content)

列使用内边距(apdding)来创建槽,这种样式不能直接用列,而是列中的元素。

列宽度 (Column Widths)

列的宽度可以用 (x) wide 来指定。如果列在一行中容不下,它将自动流动到下一行中。

分组 (Grouping)

行封装允许你将变化应用于一组列中。

清除内容 (Clearing Content)

行包装器会自动清除前一列,使它们在使用 floated 变量时非常有用。

特殊网格 (Special Grids)

此外,一些类型的网格,像 divided 或者 celled 需要使用正确格式。

变化网格

嵌套网格 (Nesting Grids)

网格可以放置在其他网格内,让你分列。

颜色 (Colored)

网格使用名为 colors 的变量 来添加背景颜色。

包括在默认调色板中不可用的颜色,使用CSS是非常好的。

橄榄绿
黑色
自定义的行
黑色
橄榄绿

自动列计数 (Automatic Column Count)

equal width 能自动划分列宽度。这在你不知道列计数提前是很有用的。

中心内容 (Centering Content)

如果一行不占用所有十六个网格列,你可以用 centered 这个变量来使列居中。

明显的语序 (Significant Word Order)

网格包括许多调整,如垂直或水平对齐,文字对齐,或默认的槽大小的变化。

一些变量,如 left floated 或者 right aligned 是依赖于词序的,需要使用相邻类名。

Left floated right aligned column
Right floated left aligned column
Center aligned row
Center aligned row
Right Aligned Grid

响应式网格 (Responsive Grids)

容器 (Containers)

container 可与网格一起使用,以提供响应、固定宽度的容器,用于包装页的内容。

可堆叠 (Stackable)

stackable grid 将自动将行堆叠到移动设备上的单个列

反顺序 (Reverse Order)

Semantic 包括特殊的反向变化(reversed),允许你在设备上对行或者列进行反顺序显示。

第一
第二
第三

加倍 (Doubling)

加倍(doubling)网格对每一个列宽进行宽度加倍

手动调整 (Manual Tweaks)

虽然设计模式,如宽度加倍 或者 可堆叠 在响应式布局中很有用,但你也可以手动调整 设备(x)宽 的值来设定。

类型

网格 (Grid) Flexbox

基本网格

分割 (Divided) 需要在行内

网格可以在其列之间有分隔符

垂直分割 (Vertically Divided) 需要在行内

网格可以分隔行之间

单元 (Celled) 需要在行内

网格可以将行划分为单元

内部单元 (Internally Celled) 需要在行内

网格只能在内部行之间有行分隔

内容

行 (Rows)

行是列的水平分组

列 (Columns)

列与列之间用槽来使得与其他列距离相等

变形

浮动 (Floated)

列可以在每一行的左或右边对其

列宽度 (Column Width)

列可以在宽度上边的很宽。

列数 (Column Count)

网格每行可以有不同数量的列

等款 (Equal Width)

网格可以自动调整所有元素以均匀分割可用宽度

1
2
3
1
2
3
4
1
2
3
1
2

拉伸 (Stretched)

行可以拉伸内容以占据整个列高度

1
1
2
1
2
3
1
2
1
2
1
2
1
2

内边距 (Padded)

网格可以在第一列和左后一列上保持其纵向和横向排边距

下面的网格具有纵向和横向边距的

下面的网格具有垂直边距

下面的网格具有水平边距

宽松 (Relaxed)

一个网格可以增加它边距已获得更多空间

颜色 (Colored)

行或列可以着色

红色
橘黄
黄色
橄榄绿
纯绿
水鸭蓝
纯蓝
紫罗兰
紫色
粉色
棕色
灰色
黑色
红色
橘黄
黄色
橄榄绿
纯绿
水鸭蓝
纯蓝
紫罗兰
紫色
粉色
棕色
灰色
黑色

居中 (Centered)

网格可以让列居中

文本对齐 (Text Alignment)

网格可以指定文本对齐方式

Justified content fits exactly inside the grid column, taking up the entire width from one side to the other. Justified content fits exactly inside the grid column, taking up the entire width from one side to the other. Justified content fits exactly inside the grid column, taking up the entire width from one side to the other. Justified content fits exactly inside the grid column, taking up the entire width from one side to the other. Justified content fits exactly inside the grid column, taking up the entire width from one side to the other.

垂直对齐 (Vertical Alignment)

网格可以指定垂直对齐来使得所有列垂直居中。

响应式

加倍宽 (Doubling)

网格可以在手机或者平板上有加倍的宽度

网格将会使用最合理的加倍宽度,比如 five column grid 在手机上将会使用 2列宽,在平板上 3列宽,在电脑上使用 5列宽。你可以使用 stackable 来强制手机上一列宽。

可堆叠 (Stackable)

在到达移动断点之后,网格可以将其堆叠在彼此顶部

要查看网格堆栈,请尝试将浏览器调整到小宽度。

反向 (Reversed)

一个网格或行可以指定其列在不同的设备大小上应该颠倒顺序

反向网格兼容划分网格和其他复杂网格类型。
计算机 A 四
计算机 A 三
计算机 A 二
计算机 A 一
计算机 B 四
计算机 B 三
计算机 B 二
计算机 B 一
平板 四
平板 三
平板 二
平板 一
手机 四
手机 三
手机 二
手机 一
计算机 行 4
计算机 行 3
计算机 行 2
计算机 行 1
平板 行 4
平板 行 3
平板 行 2
平板 行 1
手机 行 4
手机 行 3
手机 行 2
手机 行 1

设备可见 (Device Visibility)

列或行只能出现于特定的设备或屏幕大小

请看 容器文档 的端点计算。
大屏
大屏
宽屏
宽屏
手机
手机
电脑
平板和手机
所有尺寸
所有尺寸
电脑
电脑
电脑
电脑
平板
平板
平板

响应式宽 (Responsive Width)

网格行可以为特定的设备指定一个宽度

建议使用响应模式比如 doubling 或者 stackable 来降低响应复杂性。然而,在某些情况下,指定屏幕尺寸的确切宽度可能是必要的。