この記事は最終更新日から2年以上が経過しており、情報が古くなっている可能性があります。

グリッドレイアウトの作り方をメモります。


定番中の定番、jquery.vgrid.jsを使用させて頂きます。
まずはjquery.vgrid.jsその他をダウンロードし、適用します。

<script src="jquery.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="jquery.easing.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="jquery.vgrid.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="minmax.js" type="text/javascript" charset="UTF-8"></script>

次にcssを記述して行きます。

#grid-content {
max-width: 950px;
min-width: 300px;
margin: 0 auto;
}
#grid-content 各要素 {
margin: 0 0 5px 5px;
display:block;
}