网格／Grid

# 网格／Grid

<p class="uk-text-lead">创建响应式的可嵌套的流体网格布局。</p>

UIkit 的网格系统允许你将块元素排列在网格列中，并且可以与 [Width 组件](width.md) 结合使用，来设置每个内容块占用的空间大小，还可以与 [Flex 组件](flex.md) 结合来对齐和排序网格项。

***

## Usage-用法

要创建网格容器，请将 `uk-grid` 属性添加到 `<div>` 元素中。 在容器内添加子 `<div>` 元素来创建网格单元。默认情况下所有的网格单元都是堆叠排列。要并排放置它们，需要使用 [Width 组件](width.md). 使用 `.uk-child-width-expand` 会为网格列分配相等的宽度，无论有多少个网格列。

**注意** 不需要为网格容器添加 `.uk-grid` class， 因为它将通过JavaScript自动添加。但是，如果UIkit的JavaScript设置了 [延迟加载](https://developer.mozilla.org/docs/Web/HTML/Element/script#attr-defer), 则应该添加该类以防止在加载时被堆叠。

```html
<div uk-grid>
    <div></div>
    <div></div>
</div>
```
**注意** [Card 组件](card.md) 中的卡片通常在网格中使用。下面的示例就是这样。

```example
<div class="uk-child-width-expand@s uk-text-center" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
</div>
```

***

## Gap modifiers-排水沟修饰符

网格组件默认具有一个一定大小的排水沟，排水沟的大小会在较小的视口宽度上从某个断点开始自动减小。要应用其他尺寸的排水沟，请添加以下class之一。

| Class               | 描述                                                                             |
| :------------------ | :-------------------------------------------------------------------------------------- |
| `.uk-grid-small`    | 添加较小的排水沟。  |
| `.uk-grid-medium`   | 中等大小的排水沟，和默认排水沟大小相同，但不带断点 |
| `.uk-grid-large`    | 带断点的较大的排水沟                                |
| `.uk-grid-collapse` | 消除网格之间的所有排水沟。 |

```html
<div class="uk-grid-small" uk-grid>...</div>
```

```example
<div class="uk-grid-small uk-child-width-expand@s uk-text-center" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
</div>

<div class="uk-grid-medium uk-child-width-expand@s uk-text-center" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
</div>

<div class="uk-grid-large uk-child-width-expand@s uk-text-center" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
</div>

<div class="uk-grid-collapse uk-child-width-expand@s uk-text-center uk-margin-large-top" uk-grid>
    <div>
        <div class="uk-background-muted uk-padding">Item</div>
    </div>
    <div>
        <div class="uk-background-primary uk-padding uk-light">Item</div>
    </div>
    <div>
        <div class="uk-background-secondary uk-padding uk-light">Item</div>
    </div>
</div>
```

***

### 列和行

如果需要只对列或行应用不同的排水沟，请添加以下class之一。

| Class                                                 | 描述                                                     |
| :---------------------------------------------------- | :---------------------------------------- |
| `.uk-grid-column-small`<br>`.uk-grid-row-small`       | 可对列或行应用较小的排水沟。 |
| `.uk-grid-column-medium`<br>`.uk-grid-row-medium`     | 对列或行施加中等的排水沟。  |
| `.uk-grid-column-large`<br>`.uk-grid-row-large`       | 对列或行应用较大的排水沟。   |
| `.uk-grid-column-collapse`<br>`.uk-grid-row-collapse` | 完全消除列或行中的间隙。 |

```html
<div class="uk-grid-column-small uk-grid-row-large" uk-grid>...</div>
```

```example
<div class="uk-grid-column-small uk-grid-row-large uk-child-width-1-3@s uk-text-center" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
</div>
```

***

## Nested grid-网格嵌套

您可以使用嵌套网格轻松扩展网格布局。

```html
<div uk-grid>
    <div>
        <div uk-grid>
            <div></div>
            <div></div>
        </div>
    </div>
    <div>
        <div uk-grid>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
```

```example
<div class="uk-child-width-1-2 uk-text-center" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
	</div>
	<div>
		<div class="uk-child-width-1-2 uk-text-center" uk-grid>
			<div>
				<div class="uk-card uk-card-primary uk-card-body">Item</div>
			</div>
			<div>
				<div class="uk-card uk-card-primary uk-card-body">Item</div>
			</div>
		</div>
	</div>
</div>
```

***

## Divider modifier-分隔线

将 `.uk-grid-divider` 类可将网格单元用线条分隔开。该class可以与网格排水沟样式结合使用。在网格堆叠时，分隔线将变为水平分隔线。

```html
<div class="uk-grid-divider" uk-grid>...</div>
```

```example
<div class="uk-grid-divider uk-child-width-expand@s" uk-grid>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    <div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
</div>
```

***

## Match height-匹配高度

得益于 flexbox，网格单元的高度可以自动匹配。要匹配网格单元子元素的高度，请添加 `.uk-grid-match` class。例如匹配 [Card 组件](card.md)中卡片的高度。

```html
<div class="uk-grid-match" uk-grid>....</div>
```

```example
<div class="uk-grid-match uk-child-width-expand@s uk-text-center" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
     </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item<br>...</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item<br>...<br>...</div>
    </div>
</div>
```

***

### 只匹配一个单元格

你也可以只匹配一个单元格的直接子元素的高度，请将 `.uk-grid-item-match` class类添加到要匹配其子级的网格项中。

```html
<div uk-grid>
    <div class="uk-grid-item-match"></div>
    <div></div>
</div>
```

```example
<div class="uk-child-width-expand@s" uk-grid>
    <div class="uk-grid-item-match">
        <div class="uk-card uk-card-default uk-card-body">
            <h3>Heading</h3>
            <p>
                Lorem ipsum dolor sit amet.
            </p>
        </div>
     </div>
    <div>
        <h3>Heading</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
    </div>
</div>
```

***

### 目标

要更具体地选择需要匹配哪些元素的高度请将 `target: SELECTOR` 选项添加到 [Height 组件](height.md#match-height) 中的 `uk-height-match` 属性中。

```html
<div uk-grid uk-height-match="target: > div > .uk-card">
    <div>
        <div class="uk-card uk-card-default"></div>
    </div>
    <div>
        <div class="uk-card uk-card-default"></div>
    </div>
</div>
```

```example
<div class="uk-child-width-expand@s uk-text-center" uk-grid uk-height-match="target: > div > .uk-card">
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
     </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item<br>...</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item<br>...<br>...</div>
    </div>
</div>
```

***

## Grid and width-网格和宽度

网格通常都和 [Width 组件](width.md)结合起来使用，这样可以非常灵活的设置各个列的宽度。

```html
<div uk-grid>
    <div class="uk-width-auto@m"></div>
    <div class="uk-width-1-3@m"></div>
    <div class="uk-width-expand@m"></div>
</div>
```

```example
<div class="uk-text-center" uk-grid>
    <div class="uk-width-auto@m">
        <div class="uk-card uk-card-default uk-card-body">Auto</div>
    </div>
    <div class="uk-width-1-3@m">
        <div class="uk-card uk-card-default uk-card-body">1-3</div>
    </div>
    <div class="uk-width-expand@m">
        <div class="uk-card uk-card-default uk-card-body">Expand</div>
    </div>
</div>
```

***

### 子元素的宽度

如果网格列的宽度都是平均分配（等宽）的，那么只需要在网格容器上添加一个 `.uk-child-width-*` 即可，而无需在每个网格单元上都添加宽度的class。

```html
<div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid>...</div>
```

```example
<div class="uk-child-width-1-2@s uk-child-width-1-3@m uk-text-center" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
</div>
```

更多详情请查看 [Width 组件](width.md)。

***

## Grid and flex-网格和flex

您可以轻易的将网格与 [Flex 组件](flex.md)结合起来使用，来调整网格元素的对齐、排序、方向和换行。例如你可以在较宽的视口下翻转网格单元的显示顺序。这些都与排水沟和分隔线修改器一起使用。

```html
<div class="uk-flex-center" uk-grid>
    <div></div>
    <div class="uk-flex-first"></div>
</div>
```

```example
<div class="uk-grid-small uk-child-width-1-4@s uk-flex-center uk-text-center" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item 1</div>
    </div>
    <div class="uk-flex-last">
        <div class="uk-card uk-card-secondary uk-card-body">Item 2</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item 3</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item 4</div>
    </div>
    <div class="uk-flex-first">
        <div class="uk-card uk-card-primary uk-card-body">Item 5</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item 6</div>
    </div>
</div>
```

***

## Masonry-瀑布流

如果各个网格单元的高度都不同，那么可以添加 `masonry: true` 到属性来创建没有间隙的布局。

```html
<div uk-grid="masonry: true">...</div>
```

```example
<div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid="masonry: true">
    <div>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 100px">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 130px">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 150px">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 160px">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 120px">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 140px">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 200px">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 180px">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 140px">Item</div>
    </div>
</div>
```

**注意** 您可以在 [Grid Masonry网格瀑布流](/v3/tests/grid-masonry.html)的测试页面查看更多示例。

***

## Filter and order-过滤和排序

网格单元也可以按类别、日期或其他元数据进行过滤和排序。看一下 [Filter 组件](filter.md)。

***

## Parallax-视差

要在滚动时以不同的速度移动网格的单个列，只需向属性添 `parallax: NUMBER` 。该数字设置以像素为单位的视差平移。

```html
<div uk-grid="parallax: 150">...</div>
```

该效果可以应用于两种类型的标记。以下示例使用三个已定义的列，每个列包含三个项目。

```example
<div class="uk-child-width-expand@s uk-text-center" uk-grid="parallax: 150">
    <div>
        <div class="uk-card uk-card-default uk-card-body uk-grid-margin">Item</div>
        <div class="uk-card uk-card-default uk-card-body uk-grid-margin">Item</div>
        <div class="uk-card uk-card-default uk-card-body uk-grid-margin">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body uk-grid-margin">Item</div>
        <div class="uk-card uk-card-default uk-card-body uk-grid-margin">Item</div>
        <div class="uk-card uk-card-default uk-card-body uk-grid-margin">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body uk-grid-margin">Item</div>
        <div class="uk-card uk-card-default uk-card-body uk-grid-margin">Item</div>
        <div class="uk-card uk-card-default uk-card-body uk-grid-margin">Item</div>
    </div>
</div>
```

如果网格列换行到下一行，也会应用视差效果，如下例所示。

```example
<div class="uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l uk-text-center" uk-grid="parallax: 150">
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
</div>
```

**注意** 您可以在 [Grid Parallax视差网格](/v3/tests/grid-parallax.html) 测试页面查看更多示例。

***

## Component options-组件选项

以下的任意一个选项都可以应用于组件属性。多个选项用分号分隔。 [了解更多](javascript.md#component-configuration)

| 选项         | 可用值   | 默认值         | 描述                                                                       |
| :------------- | :------ | :-------------- | :------------------------------------------------------- |
| `margin `      | String  | uk-grid-margin  | 这个class被添加到分配到下一行的项目中，并为上一行创建margin。     |
| `first-column` | String  | uk-first-column | 为每行的第一个元素添加这个class。    |
| `masonry`      | Boolean | false           | 启用此网格的瀑布流布局。   |
| `parallax`     | Number  | 0               | 视差转换的值，该值必须是一个正整数。Falsy禁用视差效果（默认）。 |

***

## JavaScript

了解更多有关 [JavaScript 组件](javascript.md#programmatic-use)的内容。

### Initialization ／初始化

```js
UIkit.grid(element, options);
```