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

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

ベースとなる6カラムと12カラムのグリッドは、下記のようになっています。

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）です。

Post on:2009年2月19日

on 2010年9月1日

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

on 2010年10月25日

on 2011年10月30日