网格（Grid）
创建响应式的可嵌套的流体网格布局。
UIkit 的网格系统允许你将块元素排列在网格列中，并且可以与Width组件结合使用，来设置每个内容块占用的空间大小，还可以与Flex组件结合来对齐和排序网格项。
用法
要创建网格容器，请将uk-grid属性添加到<div>元素中。 再在容器内添加子元素<div>来创建网格单元。默认情况下所有的网格单元都是堆叠排列。要并排放置它们，需要使用Width组件。使用.uk-child-width-expand会为网格列分配相等的宽度，无论有多少个网格列。
Note 不需要为网格容器添加.uk-grid class， 因为它将通过JavaScript自动添加。但是，如果UIkit的JavaScript设置了延迟加载, 则应该添加该类以防止在加载时被堆叠。
<div uk-grid>
<div></div>
<div></div>
</div>Note Card 组件 中的卡通常在网格中使用。下面的示例就是这样。
-
<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>
排水沟
网格组件默认具有一个一定大小的排水沟，排水沟的大小会在较小的视口宽度上从某个断点开始自动减小。要应用其他尺寸的排水沟，请添加以下class之一。
| Class | Description |
|---|---|
.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>
列和行
如果需要只对列或行应用不同的排水沟，请添加以下class之一。
| Class | Description |
|---|---|
.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>-
ItemItemItemItemItemItem
-
<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>-
ItemItemItem
-
<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类可将网格单元用线条分隔开。。该class可以与网格排水沟样式结合使用。在网格堆叠时，分隔线将变为水平分隔线。
<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>
匹配高度
得益于 flexbox，网格单元的高度可以自动匹配。要匹配网格单元子元素的高度，请添加.uk-grid-match。例如匹配Card 组件中卡片的高度。
<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选项添加到Height组件中的 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>
网格和宽度
网格通常都和Width 组件结合起来使用，这样可以非常灵活的设置各个列的宽度。
<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>-
Auto1-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-*即可，而无需在每个网格单元上都添加宽度的class。
<div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid>...</div>-
ItemItemItem
-
<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 组件.
网格和flex
您可以轻易的将网格与Flex 组件结合起来使用，来调整网格元素的对齐、排序、方向和换行。例如你可以在较宽的视口下翻转网格单元的显示顺序。这些都与排水沟和分隔线修改器一起使用。
<div class="uk-flex-center" uk-grid>
<div></div>
<div class="uk-flex-first"></div>
</div>-
Item 1Item 2Item 3Item 4Item 5Item 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: true到属性来创建没有间隙的布局。
<div uk-grid="masonry: true">...</div>-
ItemItemItemItemItemItemItemItemItem
-
<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>
Note您可以在瀑布流网格的测试页面查看更多示例。
过滤和排序
网格单元也可以按类别、日期或其他元数据进行过滤和排序。看一下Filter组件.
视差
要在滚动时以不同的速度移动网格的单个列，只需向属性添parallax: NUMBER。该数字设置以像素为单位的视差平移。
<div uk-grid="parallax: 150">...</div>该效果可以应用于两种类型的标记。以下示例使用三个已定义的列，每个列包含三个项目。
-
<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>
如果网格列换行到下一行，也会应用视差效果，如下例所示。
-
ItemItemItemItemItemItemItemItemItemItemItemItem
-
<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>
Note 您可以在视差网格 测试页面查看更多示例。
组件选项
以下的任意一个选项都可以应用于组件属性。多个选项用分号分隔。了解更多
| Option | Value | Default | Description |
|---|---|---|---|
margin |
String | uk-grid-margin | 这个class被添加到分配到下一行的项目中，并为上一行创建margin。 |
first-column |
String | uk-first-column | 为每行的第一个元素添加这个class。 |
masonry |
Boolean | false | 启用此网格的瀑布流布局。 |
parallax |
Number | 0 | 视差转换的值，该值必须是一个正整数。Falsy禁用视差效果（默认）。 |
JavaScript
了解更多有关JavaScript 组件的内容。
Initialization
UIkit.grid(element, options);