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

Minigrid : http://minigrid.js.org

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

［Minigrid］の使い方

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

Minigrid : http://minigrid.js.org

スクリプトを読み込む

フォルダの中に「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 : 実装サンプル