”シンプル”なデザインを、”フツー”のWEBサイトを

レスポンシブに対応したサイト、それも流行りのグリッドデザインを手っ取り早く導入できるJavaScript。それがGrid-A-Liciousです。cssのflexboxで表現もできますが、こちらをつかった方がより簡単に実現できます。

同じようなスクリプトだと有名なMasonry.jsというのもありますが、このGrid-A-Liciousも負けず劣らずの手軽さ、高機能です。以下にデモがあるので、各デバイスでどのような感じになるのか確認できます。

Grid-A-Liciousの使い方

使い方は簡単なので、すぐに実装できます。

Jsファイルをダウンロードする

公式サイトからjquery.grid-a-licious.jsをダウンロードして、jqueryと一緒に読み込みます。

<script src="js/jquery.js"></script>
<script src="js/jquery.grid-a-licious.js"></script>

HTMLへの記述

HTMLには次のように記述します。

<div id="grid"><!--id名は任意で大丈夫-->
    <ul>
        <!--初期設定ではclass名にitemを振った要素が対象になります(変更可能)--> 
        <li class="item">グリッドの中身1</li>
        <li class="item">グリッドの中身2</li>
        <li class="item">グリッドの中身3</li>
    </ul>
</div>

Javascriptの実行

動かすためには下記を記述します。

$("#grid").gridalicious({
  gutter: 30, //グリッドの間の余白を設定します
  width: 200, //グリッドの幅を設定します
  selector:'.item', //グリッド化する要素を指定出来ます。デフォルトは.itemです。
  animate: true, //アニメーションの有無を設定します。デフォルトはfalseです。
});

たったこれだけでかっこいいグリッドデザインが完成します。しかもレスポンシブにも対応しているのでかなり便利です。