Grid]は、高さの異なる複数のカード型レイアウトを実装する際に役立つライブラリです。簡単に実装できますが、高さが異なるカードをレンガ状に綺麗に配置するとなると、どうしてもjQuery等のライブラリに頼らざるを得ません。Grid]は同じように簡単に実装できる点が大きな魅力です。Grid]を実際に試しているGif画像です。ウィンドウ幅を変更すると、配置されたカード型の要素が移動して再配置されます。スムーズで気持ちいい動作ですね。Grid]の使い方JavaScriptファイルを読み込む使い方は簡単です。メインのJavaScriptのファイルはCDNで提供・配信されているので、まずはこれをHTMLの任意の箇所で読み込みます。src="https://unpkg.com/magic-grid/dist/magic-grid.min.js"></script>JavaScriptファイルを読み込むグリッド状のカード部分のHTMLは次のように記述します。最後にスクリプトを動かすための設定を行います。Grid]で最初から用意されているオプションは次のとおり。静的コンテンツの場合は必須。各要素間のマージンを指定。グリッドにアイテムを揃えるときに短い列を優先させる。各要素を配置する際にアニメーション処理させる。デフォルトは「false」});最後に実際に上記コードを使ったサンプルを用意しました。下記リンクよりご確認ください。オンズ株式会社オンズ制作チーム。ウェブサイト制作、デザイン制作でお悩みの際はお気軽にご相談ください。https://on-ze.comTwitterFacebookFeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【JavaScript】リストやテーブルにフィルタリングや検索機能を追加できる[List.js]が超絶便利です。WordPressの[404.php]などに設定しておくと便利な各種リダイレクトの方法。【jQuery】これだけで完璧に導入できる[Lightbox]の実装方法。使って、ブラウザのステータスバーにメッセージを表示する方法。【JavaScript】ブラウザに警告ウィンドウを表示させる方法。【jQuery】背景色を複数のグラデーションで彩るプラグイン「Shards」の実装方法。