Google今日紹介する[Minigrid]はカード型のレイアウトを簡単に実装できる超軽量JavaScriptライブラリです。http://minigrid.js.orgほぼ同機能のjQueryプラグインでは[Masonry][Isotope][Freetile]などが有名ですが、これらと並んで選択肢の1つとして使えそうです。実装方法も比較的簡単なので初心者の方にもオススメ。jQuery無しで単体で動く点もポイントが高いですね。[Minigrid]の使い方まずは公式サイトから必要なファイルをダウンロードしてきます。http://minigrid.js.orgスクリプトを読み込むフォルダの中に「minigrid.min.js」というファイルが梱包されているので、これをHTMLの適当な箇所で読み込みます。ここでは仮に<body>〜</body>内の最下部に設置しましょう。src="minigrid.min.js"></script></body>各アイテムを設置。続いてカード型レイアウトのための各アイテムを構築します。ここでは親要素にclass="cards"を、子要素にclass="card"を割り当てています。class="card"></div>...</div>CSSの設定スタイルシートの設定は基本的に横幅を指定しておけば充分です。最後に[Minigrid]を初期化するコードを記述します。6});</script>以上。公式サイトを真似たサンプルも用意したので併せてご覧ください。オンズ株式会社オンズ制作チーム。ウェブサイト制作、デザイン制作でお悩みの際はお気軽にご相談ください。https://on-ze.comこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【jQuery】これだけで完璧に導入できる[Lightbox]の実装方法。