网格
创建一个完全响应式的、流动的和可嵌套的网格布局。
UIkit 的网格系统允许您将块元素排列在列中。它与 宽度组件 密切配合，以确定每个项目将占用容器多少空间，还可以与 弹性盒子组件 结合使用，以对齐和排序网格项目。
用法
要创建网格容器，请将 uk-grid 属性添加到 <div> 元素中。添加子 <div> 元素以创建单元格。默认情况下，所有网格单元格都是堆叠的。要将它们并排放置，请添加 宽度组件 中的某个类。使用 .uk-child-width-expand 将自动对项目应用相等宽度，无论有多少个项目。
注意 无需添加 .uk-grid 类，因为它将通过 JavaScript 添加。但是，如果 UIkit 的 JavaScript 延迟，则应添加该类以防止加载时堆叠。
<div uk-grid>
<div></div>
<div></div>
</div>注意 通常，卡片组件 中的卡片用于网格中。这同样适用于以下可视化示例。
<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>
间隙修饰符
网格组件带有默认间隙，通常在较小的桌面视口宽度下，间隙会从某个断点自动减小。要应用不同的间隙，请添加以下类之一。
| 类 | 描述 |
|---|---|
.uk-grid-small |
添加此类以应用一个小间隙。 |
.uk-grid-medium |
添加此类以应用与默认间隙相同的中等间隙，但没有断点。 |
.uk-grid-large |
添加此类以应用带断点的较大间隙。 |
.uk-grid-collapse |
添加此类以完全删除网格间隙。 |
<div class="uk-grid-small" uk-grid>…</div><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>
列和行
要对列或行应用不同的间隙，请添加以下类之一。
| 类 | 描述 |
|---|---|
.uk-grid-column-small.uk-grid-row-small |
添加这些类之一，以对列或行应用一个小间隙。 |
.uk-grid-column-medium.uk-grid-row-medium |
添加这些类之一，以对列或行应用中等间隙。 |
.uk-grid-column-large.uk-grid-row-large |
添加这些类之一，以对列或行应用较大间隙。 |
.uk-grid-column-collapse.uk-grid-row-collapse |
添加这些类之一，以完全删除列或行的网格间隙。 |
<div class="uk-grid-column-small uk-grid-row-large" uk-grid>…</div>- 项目项目项目项目项目项目
<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>
嵌套网格
您可以轻松地使用嵌套网格扩展网格布局。
<div uk-grid>
<div>
<div uk-grid>
<div></div>
<div></div>
</div>
</div>
<div>
<div uk-grid>
<div></div>
<div></div>
</div>
</div>
</div>- 项目项目项目
<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>
分隔符修饰符
添加 .uk-grid-divider 类以使用线条分隔网格单元格。此类可以与间隙修饰符结合使用。一旦网格堆叠，分隔符线将变为水平。
<div class="uk-grid-divider" uk-grid>…</div><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>
匹配高度
要匹配每个单元格的直接子元素的高度，请添加 .uk-grid-match 类。这是匹配 卡片组件 中的卡片高度所必需的。
<div class="uk-grid-match" uk-grid>…</div><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 类添加到要匹配其子元素的网格项目中。
<div uk-grid>
<div class="uk-grid-item-match"></div>
<div></div>
</div><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 选项添加到 高度组件 中的 uk-height-match 属性。
<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><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>
网格和宽度
网格主要与 宽度组件 结合使用。这在确定列宽时提供了很大的灵活性。
<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>- 自动1-3
<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-* 类之一添加到网格容器中，而不是将类添加到每个项目中。
<div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid>…</div>- 项目项目项目
<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>
有关更多详细信息，请查看 宽度组件。
网格和弹性盒子
您可以轻松地将网格与 弹性盒子组件 结合使用。这样，您可以修改项目的对齐方式、排序、方向和换行。例如，这允许您翻转单元格在较宽视口上的显示顺序。所有这些都与间隙和分隔符修饰符协同工作。
<div class="uk-flex-center" uk-grid>
<div></div>
<div class="uk-flex-first"></div>
</div>- 项目 1项目 2项目 3项目 4项目 5项目 6
<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 选项设置为 pack 或 next 以创建一个没有间隙的布局。
| 砌体 | 描述 |
|---|---|
pack |
将项目排序到具有最大空间的列中，以使列高度尽可能相等。 |
next |
使用自然项目顺序。 |
<div uk-grid="masonry: pack">…</div>- 项目 1项目 2项目 3项目 4项目 5项目 6项目 7项目 8项目 9
<div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid="masonry: pack"> <div> <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 100px">Item 1</div> </div> <div> <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 150px">Item 2</div> </div> <div> <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 300px">Item 3</div> </div> <div> <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 120px">Item 4</div> </div> <div> <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 180px">Item 5</div> </div> <div> <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 250px">Item 6</div> </div> <div> <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 140px">Item 7</div> </div> <div> <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 210px">Item 8</div> </div> <div> <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 200px">Item 9</div> </div> </div>
注意 您可以在 网格砌体 的测试中查看更多示例。
过滤和排序
网格项目也可以按类别、日期或其他元数据进行过滤和排序。请查看 筛选组件。
视差
要以不同的速度移动网格的单个列，只需在属性中添加 parallax: NUMBER。该数字以像素设置视差平移。
<div uk-grid="parallax: 150">…</div>- 项目项目项目项目项目项目项目项目项目项目项目项目
<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>
要调整网格视差持续时间，请设置 parallax-start 和 parallax-end 选项。parallax-start 选项定义动画何时开始。默认值为 0 表示网格的顶部边界与视口的底部边界相交。end 选项定义动画何时结束。默认值为 0 表示网格的底部边界与视口的顶部边界相交。值可以使用任何尺寸单位设置，即 vh、% 和 px。% 单位与网格的高度相关。这两个选项都允许使用基本数学运算符 + 和 -。
<div uk-grid="parallax: 150; parallax-start: 100%; parallax-end: 100%;">…</div>如果列具有不同的高度（例如，在砌体网格中），要对齐网格视差，请设置 parallax-justify: true 选项，以便所有网格列同时到达底部。将 parallax: 0 设置为仅按高度移动列，直到它们对齐。但是，当然也可以设置额外的视差平移值。
<div uk-grid="parallax: 0; parallax-justify: true; masonry: pack">…</div>- 项目 1项目 2项目 3项目 4项目 5项目 6项目 7项目 8项目 9
<div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid="parallax: 0; parallax-justify: true; masonry: pack"> <div> <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 100px">Item 1</div> </div> <div> <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 150px">Item 2</div> </div> <div> <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 300px">Item 3</div> </div> <div> <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 120px">Item 4</div> </div> <div> <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 180px">Item 5</div> </div> <div> <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 250px">Item 6</div> </div> <div> <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 140px">Item 7</div> </div> <div> <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 210px">Item 8</div> </div> <div> <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 200px">Item 9</div> </div> </div>
注意 您可以在 网格视差 测试中查看更多示例。
组件选项
任何这些选项都可以应用于组件属性。用分号隔开多个选项。 了解更多
| 选项 | 值 | 默认值 | 描述 |
|---|---|---|---|
margin |
字符串 | uk-grid-margin |
此类添加到断入下一行的项目中，通常是为了创建与上一行的边距。 |
first-column |
字符串 | uk-first-column |
此类添加到每行中的第一个元素。 |
masonry |
字符串、布尔值 | false、pack、next |
启用此网格的砌体布局。 |
parallax |
数字 | 0 |
视差平移值。该值可以是 vh、% 和 px。假值禁用视差效果（默认值）。 |
parallax-start |
长度 | 0 |
开始偏移量。该值可以是 vh、% 和 px。它支持基本数学运算符 + 和 -。默认值为 0 表示网格的顶部边界与视口的底部边界相交。 |
parallax-end |
长度 | 0 |
结束偏移量。该值可以是 vh、% 和 px。它支持基本数学运算符 + 和 -。默认值为 0 表示网格的底部边界与视口的顶部边界相交。 |
parallax-justify |
布尔值 | false |
启用视差后，所有列将同时到达底部。 |
JavaScript
了解更多有关 JavaScript 组件 的信息。
初始化
UIkit.grid(element, options);