Vue.jsにも対応の優れ物!高さが異なるカードでもグリッドにレイアウトできる超軽量ライブラリ -Magic Grid

カードの高さが常に一定であれば、CSS GridやFlexboxで簡単に実装できます。しかし、ユーザーが作成したデータを使った動的コンテンツでは高さが同じになることはほとんどありません。

カードの高さがそれぞれ異なる動的グリッドを簡単に実装できる超軽量JavaScriptライブラリを紹介します。
動的コンテンツはもちろん、静的コンテンツにも対応しています。

サイトのキャプチャ

Magic Grid
Magic Grid -GitHub

Magic Gridの特徴

Magic Gridは、高さが異なるアイテムでもグリッドに揃えてレイアウトすることができます。高さを調整するために、下部に異なるスペースは必要ありません。

高さが揃っていたり、たくさんの行にそれぞれが何行にまたがっているか定義できる場合はCSS GridやFlexboxで簡単に実装できますが、完全に高さが異なるアイテムをレンガ状に配置するMasonryスタイルのレイアウトを実装するのは不可能です。

Magic Gridでは非常にシンプルなHTMLで、簡単に実装できます。

Magic GridはVue.jsでも利用できます。

サイトのキャプチャ

Vue Magic Grid -GitHub

Magic Gridのデモ

デモではMagic Gridの気持ちいいグリッドを楽しめます。

サイトのキャプチャ

デモページ -JSFiddle

Magic Gridの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

スクリプトはCDNにも用意されています。

Step 2: HTML

グリッド用のHTMLを用意し、コンテナは参照できるようにclassやidを付与します。

Step 3: JavaScript

スクリプトを初期化し、オプションを定義します。
まずは、静的コンテンツの場合。

コンテナに動的にロードされたコンテンツがない場合、つまりそのすべての子要素が常にDOM内にある場合は、グリッドを初期化します。

動的コンテンツの場合。

何らかの理由でコンテナがAPIからのデータに依存している、または遅延が発生する場合は、そのコンテンツをDOMにレンダリングする前に、期待するアイテム数をグリッドに定義します。

スクリプトのオプションではグリッドのさまざまな設定が定義できます。

sponsors

top of page

©2024 coliss