高さの異なるパネルを揃え、汎用性に優れたグリッドが簡単に使えるシンプルなフレームワーク -FlexGRID

CSSハックもJavaScriptも使用せずに、中身のテキストや画像の高さがバラバラでも各パネルの高さを同じにする、モバイルファーストのシンプルなグリッドシステムを紹介します。

非常にシンプルなグリッドなので、さまざまなプロジェクトに利用できると思います。

FlexGRID

FlexGridは文字通り、柔軟なグリッドを提供するもので、非常にシンプルなHTMLと軽量のCSSで構成されています。

基本となるグリッドは、12個のコラムから出来ています。

デモ、幅1,200pxで表示
一列目の左一行右二行で中身の高さが異なりますが、高さが揃っています。

レスポンシブ対応なので、表示サイズを小さくしても快適に表示されます。

デモ、幅780pxで表示

対応ブラウザはChrome, Firefox, Safari、そしてIE10。IE8, 9をサポートする場合は、付属のJavaScriptを使用するとレスポンシブ対応になります。

デモ、IE8で表示

FlexGridのHTML

全体を包むラッパーに「.wrapper」、そして各列に「.row」を与え、各コラムはdiv要素で実装します。列の最後となるコラムには「last」を加えます。

<div class="wrapper">
    <div class="row">
        <div class="col_4">
            Column 1 of 3.
        </div>
        <div class="col_4">
            Column 2 of 3.
        </div>
        <div class="col_4 last">
            Column 3 of 3.
        </div>
    </div>
</div>