「The Golden Grid」は、floatなしでグリッドレイアウトを実現するCSSフレームワーク。作者はイタリアのVladimir Carrer氏。ダウンロードはこちら。作者による説明ページはこちら。（※2009/8/24現在はβ版です）
960px幅固定で、160px幅のカラム×6列または、80px幅カラム×12列でレイアウトを組む仕様。同様のフレームワークに「960 Grid System」があるが、floatを使わずclear用の空DIVタグを使用している「The Golden Grid」の方が、DIVタグのネストが少ないためHTMLコードがシンプルだ。また、クラス名でカラム幅がわかるため、直感的にレイアウトを組むことができる。
使用例
事前準備：head内にgolden.cssへのリンクを設置、または既存のCSSにコピー＆ペースト。
左にマージンをとる場合
ml000クラスとg000クラスを使用。トータル960になるように組む。
<div class="ml800 g160"> </div>
<div class="clear"> </div>
<div class="g320 ml640"> </div>
<div class="clear"> </div>
多段組の場合
ml000クラスのDIVタグを段数分組み合わせる。トータル960になるように。
<div class="g480"> </div>
<div class="g480"> </div>
<div class="clear"> </div>
<div class="g320"> </div>
<div class="g320"> </div>
<div class="g320"> </div>
<div class="clear"> </div>
コメントとトラックバック