栅格

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

UIkit 的栅格系统遵循移动优先方法，最多可容纳 10 个栅格列。它在每个栅格内使用具有预定义类的单元，这些类定义了列宽。也可以将栅格与弹性布局组件中的类结合使用，尽管它仅在现代浏览器中有效。

用法

要创建栅格容器，请将 .uk-grid 类添加到父元素。将 .uk-width-* 类之一添加到子元素以确定单元格的大小。栅格支持 1、2、3、4、5、6 和 10 个单元格分割。下表概述了可应用于单元格的 uk-width-* 类。

我们在每组单元格类中都构建了有意的冗余，因此例如 .uk-width-5-10 类与 .uk-width-1-2 的效果相同。

示例

仔细查看以下栅格示例，它为您提供了所有基本 .uk-width-* 类的概览。

注意栅格没有相关的样式 CSS。在我们的示例中，我们使用了面板组件中的面板。

标记

这是一个简单的代码示例，展示了具有 2 列的默认栅格的样子

<div class="uk-grid">
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

响应式宽度

UIkit 提供了一些非常有用的响应式宽度类。基本上，它们的工作方式与通常的宽度类相同，只是它们带有前缀，因此它们仅在某些断点处生效。这些类可以与实用工具组件中的可见性类结合使用。这非常适合调整不同设备尺寸的布局和内容。

重要要在堆叠的栅格列之间创建边距，只需添加 data-uk-grid-margin 属性。

示例

栅格间距

栅格会自动在列之间创建水平间距，在两个连续的栅格之间创建垂直间距。默认情况下，栅格间距在大屏幕上更宽。

示例

大间距

要在栅格列之间应用大间距，只需添加 .uk-grid-large 类。

示例

中等间距

要在栅格列之间应用中等大小的间距，只需添加 .uk-grid-medium 类。

示例

小间距

要在栅格列之间应用较小的间距，只需添加 .uk-grid-small 类。

示例

折叠间距

要完全删除间距，只需添加 .uk-grid-collapse 类。

示例

嵌套栅格

您可以轻松地使用嵌套栅格扩展您的栅格布局。

示例

标记

<div class="uk-grid">
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">
        <div class="uk-grid">
            <div class="uk-width-1-2">...</div>
            <div class="uk-width-1-2">...</div>
        </div>
    </div>
</div>

中心栅格

从实用工具组件中添加 .uk-container-center 类以居中栅格列。

示例

栅格分隔线

添加 .uk-grid-divider 类以使用线条分隔栅格列。要使用水平线分隔栅格，只需将该类添加到 <hr> 或 <div> 元素。

示例

标记

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

注意水平分隔线不能应用于任何带有 uk-push-* 或 uk-pull-* 类的栅格。

源排序

您可以更改列的显示顺序，以在源代码中保留特定的列顺序。添加 .uk-push-* 类之一以将列向右移动，并添加 .uk-pull-* 类之一以将列向左移动。例如，这允许您为更宽的视口翻转列的显示顺序。这些类还可以用于偏移列，从而在它们之间创建额外的空间。

源排序对于 SEO 和响应式设计很有用，因为在窄视口中，栅格将根据标记的源顺序显示。

注意此功能仅与 .uk-width-medium-* 类之一结合使用时有效。

示例

标记

<div class="uk-grid">
    <div class="uk-width-medium-1-2 uk-push-1-2">...</div>
    <div class="uk-width-medium-1-2 uk-pull-1-2">...</div>
</div>

匹配列高度

栅格组件使用 Flexbox，因此栅格列的高度会自动匹配。要在不支持 Flexbox 的旧版浏览器中实现相同的效果，只需将 data-uk-grid-match 属性添加到您的栅格。如果您的栅格包裹成多行，则仅匹配同一行中的栅格列。要匹配所有行中的栅格列，只需使用 data-uk-grid-match="{row: false}"。

示例

标记

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

注意如果栅格列扩展到 100% 的宽度，则它们的高度将不再匹配。例如，如果它们在较窄的视口中垂直堆叠，这是有道理的。

匹配面板高度

如果您想匹配栅格中面板的高度，只需添加 .uk-grid-match 类。使用数据属性时，您需要添加 {target:'.uk-panel'} 选择器。

示例

标记

<div class="uk-grid uk-grid-match" data-uk-grid-match="{target:'.uk-panel'}">
    <div class="uk-width-medium-1-3">
        <div class="uk-panel">...</div>
    </div>
</div>

包裹多行

您还可以创建一个具有任意多列的栅格，这些列会自动断到下一行。只需添加 data-uk-grid-margin 属性即可在栅格行之间创建边距。通常，此布局是使用 <ul> 元素构建的。

示例

• 框
• 框
• 框
• 框
• 框
• 框

注意您还可以为栅格列应用自定义宽度。只需添加 .uk-width 类并使用内联样式定义宽度。此示例使用固定像素值作为宽度，就像您使用图像一样。

• 框
• 框
• 框
• 框
• 框
• 框
• 框
• 框

标记

<ul class="uk-grid" data-uk-grid-margin>

    <!-- These elements have a width in percent -->
    <li class="uk-width-medium-1-5">...</li>
    <li class="uk-width-medium-3-10">...</li>

    <!-- These elements have a width in pixel -->
    <li class="uk-width" style="width: 100px;">...</li>
    <li class="uk-width" style="width: 150px;">...</li>

</ul>

均匀栅格列

要创建一个栅格，使其子元素的宽度均匀分割，您无需将相同的类应用于栅格中的每个列表项。只需将 .uk-grid-width-* 类之一添加到栅格本身即可。

示例

• 框
• 框
• 框
• 框
• 框

标记

<ul class="uk-grid uk-grid-width-1-5">
    <li>...</li>
    <li>...</li>
</ul>

响应式宽度

UIkit 还提供了响应式栅格宽度类。您可以应用这些类来保持均匀大小的栅格列，而不管设备宽度如何。

示例

• 框
• 框
• 框
• 框
• 框

标记

<ul class="uk-grid uk-grid-width-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-5">
    <li>...</li>
    <li>...</li>
</ul>