はじめに
レスポンシブデザインにおいてグリットレイアウトを実現したい時、皆さんはどのように実装していますか？
FlexboxやCSS Gridで実装することができますが、ユーザーが作成した動的コンテンツを扱っている場合は高さがバラバラになってしまい行の下部に不要な空白ができちゃったりしますよね。
そんなカードの高さが一つひとつ異なる動的コンテンツを簡単にグリットレイアウトに出来るライブラリ「Magic Grid」の紹介です。もちろん静的コンテンツにも対応しています。
DEMO
まずはどんな動きになるかデモをご覧ください。
DEMO
いい感じですね〜。
実装していく
▼外部ファイル
<script src="https://unpkg.com/magic-grid/dist/magic-grid.min.js"><script>
今回はCDNを使用します。
GitHubよりダウンロードもできます。
<div class="container">
<div class="item-base item1">1</div>
<div class="item-base item2">2</div>
<div class="item-base item3">3</div>
<div class="item-base item4">4</div>
<div class="item-base item5">5</div>
<div class="item-base item6">6</div>
<div class="item-base item7">7</div>
<div class="item-base item8">8</div>
<div class="item-base item9">9</div>
<div class="item-base item10">10</div>
<div class="item-base item11">11</div>
<div class="item-base item12">12</div>
<div class="item-base item13">13</div>
<div>
HTMLはこんな感じです。全体を包括するクラスやIDを付与します。今回は.containerを指定しています。
let magicGrid = new MagicGrid({
container: ".container", // 必須。クラス, ID, またはHTML要素で定義可能
static: true, // 静的コンテンツに必要です
animate: true, // オプション
});
magicGrid.listen();
今回は静的コンテンツ、つまりすべての子要素が常にDOMにあるのでグリッドを初期化する必要があります。
ちなみに追加する場所は外部ファイルで読み込んだ
<script src="https://unpkg.com/magic-grid/dist/magic-grid.min.js"><script>
より後になります。
let magicGrid = new MagicGrid({
container: ".container", // 必須。クラス, ID, またはHTML要素で定義可能
items: 20, // 20個のアイテムがあるグリッドの場合。動的コンテンツに必要です
animate: true, // オプション
});
magicGrid.listen();
動的コンテンツの場合、つまりコンテナがAPIからのデータに依存していたり、何らかの理由でDOMでコンテンツをレンダリングする前に遅延が発生した場合は、グリッドに期待するアイテムの数を知らせる必要があります。
▼JavaScript（オプション設定）let magicGrid = new MagicGrid（{
container ：" .container ", // 必須。クラス, ID, またはHTML要素で定義可能
static ：false, // 静的コンテンツに必要です。デフォルト：false
items ：30, // 動的コンテンツに必要です。コンテナ内のアイテムの初期数
gutter ：30, // オプション。アイテム間のスペース。デフォルト：25（px）
maxColumns ：5, // オプション。列の最大数。デフォルト：Infinite
useMin ：true, // オプション。アイテムの配置時に短い列を優先します。デフォルト：false
useTransform ：true, // オプション。CSS変換を使用してアイテムを配置します。デフォルト：True
animate ：true, // オプション。アイテムの配置をアニメーション化します。デフォルト：false
} ）;
上記のようにオプションが設定可能です。
さいごに
本当にサクッと実装できてしまいました。おすすめです。
参考ページ
https://www.npmjs.com/package/magic-grid
https://github.com/e-oj/Magic-Grid