网格系统

相关源文件

• examples/grid.html
• src/definitions/collections/grid.less
• src/definitions/elements/container.less
• src/themes/default/collections/grid.variables
• src/themes/default/elements/container.variables
• src/themes/fixed-width/collections/grid.overrides
• src/themes/fixed-width/collections/grid.variables

Semantic UI 的网格系统提供了一个响应式、灵活的布局框架，用于组织网页上的内容。它是一个核心集合组件，使开发人员能够创建一致且适应性强的页面布局。本文档涵盖了 Semantic UI 中网格系统的结构、实现和用法。

有关表单、菜单或表格等其他集合组件的信息，请分别参阅 4.1.1、4.1.3 和 4.1.4 页面。

网格系统基础知识

Semantic UI 网格系统实现为一个基于 flexbox 的布局系统，具有标准的 16 列结构。它通过可配置的列间距和行间距提供一致的间距，从而能够精确控制不同设备尺寸的内容布局。

来源：src/definitions/collections/grid.less24-30 src/themes/default/collections/grid.variables16-26

网格基本结构

网格组件

Semantic UI 网格由行和列组成。网格本身是包含行的容器，行包含实际内容的列。该系统使用 CSS flexbox 进行布局管理。

来源：src/definitions/collections/grid.less24-30 src/definitions/collections/grid.less82-93 src/definitions/collections/grid.less62-71

网格尺寸

默认网格有 16 列，宽度相等。列可以通过两种方式指定：

1. 通过设置网格的列数（例如，ui four column grid）
2. 通过指定单个列的宽度（例如，four wide column）

列宽定义为总网格宽度的百分比，以 16 列网格为标准。

列宽	百分比	CSS 类
1 列宽	6.25%	one wide column
2 列宽	12.5%	two wide column
4 列宽	25%	four wide column
8 列宽	50%	eight wide column
16 列宽	100%	sixteen wide column

来源：src/definitions/collections/grid.less217-281 src/definitions/collections/grid.less343-438

网格与容器的关系

网格系统可与容器元素结合使用，以创建具有适当边距的响应式布局。容器为网格提供了有限的宽度上下文，这对于在大屏幕上居中文本尤其有用。

来源：src/definitions/elements/container.less25-28 examples/grid.html30-49

容器类型

1. 标准容器：提供响应式最大宽度，并自动居中
2. 文本容器：针对单列文本进行了优化，具有合适的阅读宽度
3. 流体容器：占据 100% 的可用宽度
4. 网格容器：经过特殊尺寸调整，以适应网格的负边距

来源：src/definitions/elements/container.less25-121 src/themes/default/elements/container.variables10-48

响应式网格系统

设备断点

网格系统使用媒体查询响应不同的屏幕尺寸。该框架定义了几个标准断点：

设备类别	断点范围	可变
移动端	0px - 767px	@largestMobileScreen
平板电脑	768px - 991px	@largestTabletScreen
电脑	992px - 1199px	@largestSmallMonitor
大显示器	1200px - 1919px	@largestLargeMonitor
宽屏	1920px+	@widescreenMonitorBreakpoint

来源：src/definitions/collections/grid.less445-542 src/definitions/collections/grid.less160-204

响应式列宽

通过添加特定设备的类，列可以具有不同设备的宽度

这创建了一个列，其

• 在移动设备上宽度为 50% (8/16)
• 在平板电脑上宽度为 25% (4/16)
• 在电脑上宽度为 12.5% (2/16)

来源：src/definitions/collections/grid.less445-942 examples/grid.html296-302

响应式模式

Semantic UI 提供了两种重要的响应式模式：

1. 堆叠式网格：在移动设备上，列将垂直堆叠

2. 倍增网格：列在较小的尺寸下宽度会逐渐翻倍

来源：examples/grid.html275-291

网格变体

网格间距

网格间距可以通过以下变体进行调整：

1. 默认：标准列间距 (2rem) 和行间距 (2rem)
2. 宽松：更宽的列间距 (3rem)
3. 非常宽松：最宽的列间距 (5rem)
4. 填充：为网格容器添加内边距

来源：src/definitions/collections/grid.less42-49 src/definitions/collections/grid.less971-983 src/themes/default/collections/grid.variables35-36

对齐选项

水平对齐

1. 居中网格：使列在网格中居中

2. 浮动列（左/右）：将列推到左侧或右侧

垂直对齐

可以使用对齐类将列在行内进行垂直对齐

• top aligned
• middle aligned
• bottom aligned

来源：src/definitions/collections/grid.less948-965 examples/grid.html191-197 examples/grid.html241-254

分隔变体

1. 分隔网格：在行或列之间添加分隔线

2. 单元格网格：在所有列周围添加单元格边框

来源：examples/grid.html118-183

网格实现细节

网格系统主要通过 CSS flexbox 属性实现，行和列的样式用于创建所需的布局行为。让我们检查实现的几个关键方面：

来源： src/definitions/collections/grid.less24-30 src/definitions/collections/grid.less36-41 src/definitions/collections/grid.less68-70 src/definitions/collections/grid.less82-93

关键 CSS 属性

1. Grid 容器:

   • display: flex - 启用 Flexbox 布局
   • flex-direction: row - 水平流
   • flex-wrap: wrap - 允许换行
   • 负外边距以偏移列内边距

2. 行:

   • display: flex - 使用 Flexbox 进行子网格布局
   • width: 100% - 父容器的全部宽度
   • 用于垂直间距的内边距

3. 列:

   • 用于栅格的内边距
   • 基于列数的宽度（百分比）

来源：src/definitions/collections/grid.less24-30 src/definitions/collections/grid.less82-93 src/definitions/collections/grid.less62-71

使用示例

基础 Grid

带行的 Grid

响应式 Grid

居中内容

来源： examples/grid.html

与页面布局集成

Grid 可与容器结合使用以创建完整的页面布局。典型的模式是

对于文本量大的页面，文本容器可提供最佳阅读宽度

来源： examples/grid.html30-49 examples/grid.html51-62

配置

可以通过修改主题文件中的变量来配置 Grid 系统

可变	目的	默认值
@gutterWidth	列之间的间距	2rem
@rowSpacing	行之间的间距	2rem
@relaxedGutterWidth	更宽的栅格选项	3rem
@veryRelaxedGutterWidth	最宽的栅格选项	5rem

来源： src/themes/default/collections/grid.variables19-21 src/themes/default/collections/grid.variables35-36

Grid 系统高度可配置，可以通过调整自定义主题中的这些变量来适应特定的设计需求。