メインコンテンツにスキップ

ドキュメント

グリッド

完全にレスポンシブで、流動的で、ネスト可能なグリッドレイアウトを作成します。

UIkitのグリッドシステムを使用すると、ブロック要素を列に配置できます。 幅コンポーネントと緊密に連携して、各アイテムがコンテナのスペースをどれだけ占めるかを決定し、フレックスコンポーネントと組み合わせてグリッドアイテムの配置と順序を調整することもできます。

使用方法

グリッドコンテナを作成するには、<div>要素にuk-grid属性を追加します。 子<div>要素を追加してセルを作成します。 デフォルトでは、すべてのグリッドセルは積み重ねられます。 それらを横に並べるには、幅コンポーネントからクラスの1つを追加します。 .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.（ロレム・イプサム・ dolor シット・アメット、コンセクテター・アディピスシング・エリット、セド・ド・エイウスモッド・テンポリンシディドゥントゥート・ラボレ・エ・ドローレ・マグナ・アリクア。）
    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.（ドゥイス・アウテ・イレール・ dolor イン・レプレヘンデリット・イン・ヴォルプタテ・ヴェリット・エッセ・キラム・ドローレ・ユー・フギアット・ヌラ・パリャトゥール。）
  • <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>

1つのセルのみを一致させる

1つのセルの直接の子の高さを一致させることもできます。 そのためには、子と一致させたいグリッドアイテムに.uk-grid-item-matchクラスを追加します。

<div uk-grid>
    <div class="uk-grid-item-match"></div>
    <div></div>
</div>

  • 見出し

    Lorem ipsum dolor sit amet.（ロレム・イプサム・ dolor シット・アメット。）

    見出し

    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.（ロレム・イプサム・ dolor シット・アメット、コンセクテター・アディピスシング・エリット、セド・ド・エイウスモッド・テンポリンシディドゥントゥート・ラボレ・エ・ドローレ・マグナ・アリクア。ウト・エニム・アド・ミニム・ヴェニアム、クイス・ノストルド・エクセルシテーション・ウルラムコ・ラボリス・ニシ・ウト・アリキップ・エクス・エア・コモド・コンセクアット。）

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

ターゲット

高さを一致させる要素をより具体的に選択するには、高さコンポーネントから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>
  • アイテム
    アイテム
    …
    アイテム
    …
    …
  • <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);