跳至主要內容

文件

網格

建立完全響應式、流動且可巢狀的網格佈局。

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。虛值會停用視差效果（預設）。
parallax-start 長度 0 開始偏移量。值可以是 vh、% 和 px。它支援基本數學運算元 + 和 -。預設值 0 表示網格的頂部邊框和視埠的底部邊框相交。
parallax-end 長度 0 結束偏移量。值可以是 vh、% 和 px。它支援基本數學運算元 + 和 -。預設值 0 表示網格的底部邊框和視埠的頂部邊框相交。
parallax-justify 布林值 false 啟用視差後，所有欄將同時到達底部。

JavaScript

深入瞭解JavaScript 組件。

初始化

UIkit.grid(element, options);