[CSS]全幅960+10pxをベースに汎用的に展開するグリッドシステム

全幅970px(960+10px)の6カラムと12カラムのグリッドをベースにし、汎用的に展開できるように設計されたグリッドシステム「The Golden Grid」を紹介します。

The Golden Gridのデモのキャプチャ

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カラムのグリッドのキャプチャ

6カラムと12カラムのグリッド
demo: 6カラム
demo: 12カラム

カラムを組み合わせると下記のパターンで配置できます。

レイアウトのパターンのキャプチャ

レイアウトのパターン
demo

複数のカラムを使用して、画像を配置する際のパターン。

画像などの配置例のキャプチャ

画像などの配置例
demo

ページのレイアウトは、こんなパターンに。

デモのキャプチャ

demo 4

デモのキャプチャ

demo 9

サイトでは、他にも多数のデモがあります。

The Golden GridのテストブラウザはIE 6/7, Firefox 3, Opera 9.62, Safari 3.2.1 (Win), Chrome 1.0で、スタイルシートの容量は軽量(2KB、圧縮時1KB)です。

sponsors

top of page

©2018 coliss