[JS]異なる高さのdiv要素を揃えるだけでなく、均等割付やグリッドに揃えることもできるスクリプト -jQuery.grrrid.js

とにかく揃えたい人にぴったりのjQueryのプラグインを紹介します。

jQuery.grrrid, grrreat for all grid-related layouts.

[ad#ad-2]

• jQuery.grrrid.jsのデモ
• jQuery.grrrid.jsの使い方

jQuery.grrrid.jsのデモ

デモではjQuery.grrrid.jsが揃えることができる3つのレイアウトがあります。

Equalize

異なる高さのdiv要素の高さを揃えます。

Before: 高さがバラバラなdiv要素

After: 高さが揃ったdiv要素

[ad#ad-2]

Justify

div要素のパディングやボーダーやマージンに関わらず、親要素に対して均等割付をします。

Before: 成り行きで配置されたdiv要素

After: 親要素に対して均等に満たされて配置されたdiv要素

Grid

ピクセル単位でグリッドに揃えます。

Before: 子要素の成り行きの高さと幅のdiv要素

After: 子要素のサイズに関係なくグリッドに揃ったdiv要素

jQuery.grrrid.jsの使い方

外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして記述します。

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.grrrid.js" type="text/javascript"></script>

JavaScript

適用する要素をjQueryのセレクタで指定し、スクリプトを実行するだけです。
上記の3つのデモを例にスクリプトを紹介します。

異なる高さのdiv要素を揃えます。

<script type="text/javascript">
$(document).ready(function() {
$("#equalize div.after").grrrid("equalize");
});
</script>

均等割付で揃えます。

<script type="text/javascript">
$(document).ready(function() {
$("#justify div.after").grrrid("justify");
});
</script>

グリッドに揃えます。

<script type="text/javascript">
$(document).ready(function() {
$("#grid span.after").grrrid("grid",50,40);
});
</script>