[CSS]全幅960+10pxをベースに汎用的に展開するグリッドシステム
Post on:2009年2月19日
sponsors
全幅970px（960+10px）の6カラムと12カラムのグリッドをベースにし、汎用的に展開できるように設計されたグリッドシステム「The Golden Grid」を紹介します。
ベースとなる6カラムと12カラムのグリッドは、下記のようになっています。
- 6カラムの構成
- 1カラム：150px、マージン：10px
- 150*6+10*7=970px
- 12カラムの構成
- 1カラム：70px、マージン：10px
- 70*12+10*13=970px
6カラムと12カラムのグリッド
demo: 6カラム
demo: 12カラム
カラムを組み合わせると下記のパターンで配置できます。
レイアウトのパターン
demo
複数のカラムを使用して、画像を配置する際のパターン。
画像などの配置例
demo
ページのレイアウトは、こんなパターンに。
サイトでは、他にも多数のデモがあります。
The Golden GridのテストブラウザはIE 6/7, Firefox 3, Opera 9.62, Safari 3.2.1 (Win), Chrome 1.0で、スタイルシートの容量は軽量（2KB、圧縮時1KB）です。
sponsors
