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

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

サイトのキャプチャ

The Square Grid

The Square Gridのグリッド設計

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

均等分割のカラム

サイトのキャプチャ

※クリックで拡大

カラムのバリエーション

サイトのキャプチャ

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

黄金比を使ったカラム

サイトのキャプチャ

※クリックで拡大

The Square Gridのダウンロード

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

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

Photoshop用のテンプレート

top of page

©2017 coliss