黄金比にも対応したグリッドレイアウト用のシンプルなCSSのフレームワーク -The Square Grid

2, 3, 4, 6, 9, 12, 18の均等分割をはじめ、黄金比の分割にも対応したグリッドレイアウト用のCSSのフレームワークを紹介します。

The Square Grid

[ad#ad-2]

The Square Gridのグリッド設計

グリッドの全幅は994pxで、両端に余白7pxをとり、残りの980pxを均等に35分割したものをベースにしています。

均等分割のカラム

※クリックで拡大

カラムのバリエーション

※サムネイル画像は一部省略
※クリックで拡大

黄金比を使ったカラム

※クリックで拡大

[ad#ad-2]

The Square Gridのダウンロード

ダウンロードできるファイルにはCSSのフレームワークをはじめ、デザイン用のファイルなども含まれています。

• HTML, CSSファイル一式
• デザイン用のテンプレートファイル（Photoshop, Illustrator, InDesign）
• スケッチ用のPDFファイル

Photoshop用のテンプレート