[CSS]たった二行で、さまざまなカラムを設定するグリッドのフレームワーク

たった二行のシンプルなスタイルシートで、さまざまなサイズのカラムを設定するグリッドのフレームワークをを紹介します。

Two Lines CSS Framework
デモページ：1

[ad#ad-2]

たった二行のグリッドのフレームワーク

上記デモページで使用しているスタイルシートはとてもシンプルで、たった二行です。

CSS

.row { display:table; width:960px; margin:0 auto }
.cell { display:table-cell; vertical-align:top; padding-left:10px }

HTMLもシンプルでdiv要素を使うだけです。

HTML

3カラムの例です。カラムの数にあわせて、div要素を配置します。

<div class="row">
<div class="cell" style="background-color:#aaa;">1</div>
<div class="cell" style="background-color:#bbb;">2</div>
<div class="cell" style="background-color:#ccc;">3</div>
</div>

CSSの解説

スタイルシートはそれぞれ3つのプロパティで構成されています。

.row {
display:table; /* コンテナ全体にテーブルの表示スタイルを適用 */
width:960px; /* 全体の幅、サイズの変更をはじめ、単位を%, emにも変更可能 */
margin:0 auto /* 左右の中央に配置*/
}
.cell {
display:table-cell; /* 各カラムにテーブルのセルの表示スタイルを適用*/
vertical-align:top; /* 上端（top）揃え */
padding-left:10px /* カラム間の溝の幅 */
}

スタイルシートは上記のデフォルトのままでも、さまざまなレイアウトに対応できます。
下記にそのデモページを紹介します。

デモページ：2

[ad#ad-2]

デモページ：3

一行版のフレームワーク

また、サイトでも一行版のフレームワークも公開しており、こちらは「display: inline;」を使用してインラインボックスとフロートを使用してさまざまなサイズのカラムを設定しています。
1 line CSS Grid Framework

CSS

.dp50 {width:50%;  float:left;  display: inline;  *margin-right:-1px; }

デモページ：1

デモページ：2

デモページ：3