simplecoreな毎日

アラフォー既婚男性の日々、子育て、その他雑記

2017.10.4

レスポンシブに対応したグリッドデザインがすぐに作れるGrid—A—Licious

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です。
});

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

まさに青春狂走曲な一冊

BOOK

まさに青春狂走曲な一冊

WordPress環境をローカル上に簡単に構築できるLocal by Flywheel

WordPress

WordPress環境をローカル上に簡単に構築できるLocal by Flywheel

CAKEというバンドがかっこいいという話

MUSIC

CAKEというバンドがかっこいいという話

浦和レッズの森脇問題について思う事

THOUGHT

浦和レッズの森脇問題について思う事

Bootstrap4でデバイス別に表示・非表示を切り替えるclass

WEB

Bootstrap4でデバイス別に表示・非表示を切り替えるclass

WEBデザイナーの浅いアフィリエイトの話

WEB

WEBデザイナーの浅いアフィリエイトの話

レスポンシブに対応したグリッドデザインがすぐに作れるGrid—A—Licious

WEB

レスポンシブに対応したグリッドデザインがすぐに作れるGrid—A—Licious

ハッピーガールちゃんと保育園の話を聞きに行く

LIFE

ハッピーガールちゃんと保育園の話を聞きに行く