跳到主要内容

文档

Grid

创建完全响应式、流式且可嵌套的栅格布局。

UIkit 的栅格系统允许你把块级元素按列排列。它与 Width 组件 紧密配合，用于决定每个项目在容器中占据多少空间；它也可以与 Flex 组件 组合使用，来对齐栅格项目并调整它们的顺序。

用法

要创建栅格容器，请为 <div> 元素添加 uk-grid 属性。添加子 <div> 元素即可创建单元格。默认情况下，所有栅格单元格会上下堆叠。要让它们并排排列，请添加 Width 组件 中的某个类。使用 .uk-child-width-expand 会自动让所有项目等宽，无论项目数量有多少。

注意 无需手动添加 .uk-grid 类，因为它会由 JavaScript 添加。不过，如果 UIkit 的 JavaScript 被延迟加载，则应手动添加该类，以避免加载过程中出现上下堆叠。

<div uk-grid>
    <div></div>
    <div></div>
</div>

注意 栅格中经常会使用 Card 组件 里的卡片来展示。下面的可视化示例也是如此。

Item
Item
Item
<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>

间距修饰符

Grid 组件自带一个默认间距，在某个断点（通常是较小的桌面视口宽度）之后会自动减小。要应用不同的间距，请添加下面这些类中的某一个。

类 说明
.uk-grid-small 添加该类可应用小间距。
.uk-grid-medium 添加该类可应用与默认值相同的中等间距，但不带断点。
.uk-grid-large 添加该类可应用带断点的大间距。
.uk-grid-collapse 添加该类可完全移除栅格间距。 
<div class="uk-grid-small" uk-grid>…</div>
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
<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>
Item
Item
Item
Item
Item
Item
<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>
Item
Item
Item
<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 类。要让 Card 组件 中的卡片高度保持一致，就需要这个类。

<div class="uk-grid-match" uk-grid>…</div>
Item
Item
…
Item
…
…
<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>

Heading

Lorem ipsum dolor sit amet.

Heading

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>

目标元素

如果要更精确地指定哪些元素需要等高，请为 Height 组件 中的 uk-height-match 属性添加 target: SELECTOR 选项。

<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>
Item
Item
…
Item
…
…
<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>
Auto
1-3
Expand
<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>
Item
Item
Item
<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 1
Item 2
Item 3
Item 4
Item 5
Item 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，生成没有空隙的布局。

Masonry 说明
pack 把项目排入剩余空间最多的列，使各列高度尽可能一致。
next 使用项目本身的自然顺序。 
<div uk-grid="masonry: pack">…</div>
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 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>

注意 你可以在 栅格瀑布流 的测试页面中查看更多示例。

过滤与排序

栅格项目还可以按分类、日期或其他元数据进行过滤和排序。请参阅 Filter 组件。

视差

要让栅格中的单列在滚动时以不同速度移动，只需在属性中添加 parallax: NUMBER。该数字用于设置视差位移的像素值。

<div uk-grid="parallax: 150">…</div>
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
<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 选项，让所有栅格列同时到达底部。此外还可以设置一个额外的视差位移值。

<div uk-grid="parallax-justify: true; masonry: pack">…</div>
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
<div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid="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 String uk-grid-margin 该类会被添加到换行到下一行的项目上，通常用于为上一行创建外边距。
first-column String uk-first-column 该类会被添加到每一行的第一个元素上。
masonry String, Boolean false, pack, next 为该栅格启用瀑布流布局。
parallax Number 0 视差位移值。取值可以是 vh、% 和 px。假值会禁用视差效果（默认）。
parallax-start Length 0 起始偏移量。取值可以是 vh、% 和 px，支持基本数学运算符 + 和 -。默认值 0 表示栅格的上边框与视口的下边框相交。
parallax-end Length 0 结束偏移量。取值可以是 vh、% 和 px，支持基本数学运算符 + 和 -。默认值 0 表示栅格的下边框与视口的上边框相交。
parallax-justify Boolean false 启用视差后，让所有列同时到达底部。

JavaScript

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

初始化

UIkit.grid(element, options);