【JavaScript】カード型レイアウトを簡単に実装できる[Minigrid]の使い方

Ads by Google

今日紹介する[Minigrid]はカード型のレイアウトを簡単に実装できる超軽量JavaScriptライブラリです。

Minigrid : http://alves.im/minigrid/

ほぼ同機能のjQueryプラグインでは[Masonry][Isotope][Freetile]などが有名ですが、これらと並んで選択肢の1つとして使えそうです。
実装方法も比較的簡単なので初心者の方にもオススメ。またjQuery無しで単体で動く点もポイントが高いですね。

[Minigrid]の使い方

まずは公式サイトから必要なファイルをダウンロードしてきます。

Minigrid : http://alves.im/minigrid/

スクリプトを読み込む

フォルダの中に「minigrid.min.js」というファイルが梱包されているので、これをHTMLの適当な箇所で読み込みます。
ここでは仮に<body>〜</body>内の最下部に設置しましょう。

<body>
...
<script src="minigrid.min.js"></script>
</body>
各アイテムを設置。

続いてカード型レイアウトのための各アイテムを構築します。
ここでは親要素にclass="cards"を、子要素にclass="card"を割り当てています。

<div class="cards">
	<div class="card"></div>
	<div class="card"></div>
	<div class="card"></div>
	<div class="card"></div>
	...
</div>
CSSの設定

スタイルシートの設定は基本的に横幅を指定しておけば充分です。

.cards {
margin: 0 auto;
width: 100%;
}
.card {
width: 20%;
overflow: hidden;
}
[Minigrid]の初期化

最後に[Minigrid]を初期化するコードを記述します。

<script>
minigrid({
	container: '.cards',
	item: '.card',
	gutter: 6
});
</script>

以上。
公式サイトを真似たサンプルも用意したので併せてご覧ください。

Minigrid : 実装サンプル

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google