跳到主要内容

文档

网格

创建一个完全响应式、流畅且可嵌套的网格布局。

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>
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<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>

标题

Lorem ipsum dolor sit amet.

标题

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.

<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。Falsy 值禁用视差效果（默认）。
parallax-start 长度 0 起始偏移量。该值可以为 vh、% 和 px。它支持基本数学操作数 + 和 -。默认值 0 表示网格的顶部边框和视口的底部边框相交。
parallax-end 长度 0 结束偏移量。该值可以为 vh、% 和 px。它支持基本数学操作数 + 和 -。默认值 0 表示网格的底部边框和视口的顶部边框相交。
parallax-justify 布尔值 false 启用视差后，所有列将同时到达底部。

JavaScript

了解有关JavaScript 组件的更多信息。

初始化

UIkit.grid(element, options);