[JS]異なる高さのdiv要素を揃えるだけでなく、均等割付やグリッドに揃えることもできるスクリプト -jQuery.grrrid.js
Post on:2012年5月18日
とにかく揃えたい人にぴったりのjQueryのプラグインを紹介します。

jQuery.grrrid, grrreat for all grid-related layouts.
[ad#ad-2]
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>
sponsors