今さら……という感じがしなくもないですが、レスポンシヴ対応のグリッド・システムを作ったのでシェアします。
巷に出回っているものは横幅をピクセル単位で指定しているものが多いのですが、今回はパーセント単位で、ウィンドウサイズに合わせてフレキシブルに対応できるタイプのものを制作しました。
まずはサンプルをご覧ください。
ボックス要素をグリッドに沿って配置したいとき、この［グリッド・システム］を使えば簡単に実装できます。
スタイルシートの記述は以下のとおり。
.grid {text-align:left; margin:0 0 20px 0;}
.grid:after {content:""; clear:both; display:block; visibility:hidden; height:0;}
.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11 {float:left; overflow:hidden; padding:0 0 0.1em 0; margin:0 2% 0 0;}
.grid-1 {width:6.5%;}
.grid-2 {width:15%;}
.grid-3 {width:23.5%;}
.grid-4 {width:32%;}
.grid-5 {width:40.5%;}
.grid-6 {width:49%;}
.grid-7 {width:57.5%;}
.grid-8 {width:66%;}
.grid-9 {width:74.5%;}
.grid-10 {width:83%;}
.grid-11 {width:91.5%;}
.grid-12 {width:100%;}
.grid-1:nth-last-child(2),
.grid-2:nth-last-child(2),
.grid-3:nth-last-child(2),
.grid-4:nth-last-child(2),
.grid-5:nth-last-child(2),
.grid-6:nth-last-child(2),
.grid-7:nth-last-child(2),
.grid-8:nth-last-child(2),
.grid-9:nth-last-child(2),
.grid-10:nth-last-child(2),
.grid-11:nth-last-child(2) {margin:0;}
.grid-1:last-child,
.grid-2:last-child,
.grid-3:last-child,
.grid-4:last-child,
.grid-5:last-child,
.grid-6:last-child,
.grid-7:last-child,
.grid-8:last-child,
.grid-9:last-child,
.grid-10:last-child,
.grid-11:last-child {float:right; margin:0;}
ちょっと長いように感じるかもしれませんが、セレクタが12個あるだけで、指定する要素自体は少なく、基本構造はシンプルです。
ポイントは、CSSセレクタの nth-last-child(2) と last-child を利用している点。
nth-last-child(2) で「最後から２番目の要素」を、last-child で「最後の要素」をそれぞれ指定して、margin:0; と float:right; を追記しています。
これによって、子要素が親要素からはみ出すことなく、親要素いっぱいに綺麗に配置されます。
また、各子要素の間のマージンは「2%」としており、そこから逆算して子要素の横幅を指定しています。
実装の仕方、HTMLの記述では、親要素に <div class="col"> 〜 </div> を指定して、その中に子要素のカラム部分を設置していきます。
このとき、子要素のクラス名「grid-X」の「X」の値が合計で「12」になるように記述します。
一例としては以下のようになります。
<div class="grid"> <div class="grid-4">4</div> <div class="grid-4">4</div> <div class="grid-4">4</div> </div> <div class="grid"> <div class="grid-3">3</div> <div class="grid-3">3</div> <div class="grid-3">3</div> <div class="grid-3">3</div> </div> <div class="grid"> <div class="grid-2">2</div> <div class="grid-1">1</div> <div class="grid-4">4</div> <div class="grid-5">5</div> </div>
子要素の「grid-X」の「X」の値の合計が「12」になっていれば、どんなパターンでもOKです。
ぜひお試しください。
