[CSS]デスクトップ・スマートフォン用のエラスティックグリッドシステム -Columnal

豊富なレイアウトオプション、柔軟なカスタマイズ、ワイヤーフレーム用の素材など至れり尽くせり、エラスティックグリッドを採用したスタイルシートのグリッドシステムを紹介します。

Columnal
A responsive CSS grid system helping desktop and mobile browsers play nicely together.

[ad#ad-2]

Columnalの特徴

• ページの構造がどのように構築されているのかのデバッグ用CSS
• 豊富なレイアウトオプション（サブカラム）
• コンテンツの前後にカラムを接続可能
• 垂直方向のスペース用のスタイル
• グリッドのシステムのPDF
• ワイヤーフレームのテンプレート

Columnalのデモ

グリッドはエラスティックで、サイズは1140pxです。IE6-8では固定されます。

デモページ

ブラウザのサイズを変更すると、それに最適なレイアウトに変更されます。
スマートフォンなどの小さいスクリーンは下記のようになります。

ブラウザのサイズを小さくしたキャプチャ

サブカラムのパターンもたくさんあるため、レイアウトのバリエーションも豊富に楽しめます。

デモページ：Sub columns

[ad#ad-2]

Columnalのデザインキット

Columnalではデザインキットも用意されています。

• スケッチ用の素材
  PDF
• ワイヤーフレーム用の素材
  Illustrator用（AI）、Balsamiq Mockups用（BMML）

スケッチ用のPDFのキャプチャ