[CSS]レスポンシブ対応のグリッドの幅は？ カラム数は？ 溝のサイズは？ グリッド作成に役立つ万能ツール -Graaf

人気が高いWebサイトやフレームワークなどで、実際に使用されているグリッドをページ上にオーバーレイで重ねて表示できるデザイン用のツールを紹介します。

既存のグリッドだけでなく、幅・カラム数・溝の数値を簡単に変更できる優れものです。

Graaf
Graaf -GitHub

デフォルトで用意されているグリッドは、13種類。
自分でオリジナルのグリッドを作成して、利用することもできます。

各サイト・フレームワークで使用されているグリッドの一覧

Graafの使い方は、簡単です。
当スタイルシートを外部ファイルとして、グリッド用のスタイルシートを記述するだけです。

グリッド用のスタイルシートは、一覧から利用することもできます。

グリッドはページ上にオーバーレイで重ねて表示できます。

デモページ

「Try it」をクリックします。

デモページにグリッドをオーバーレイ

グリッドを簡単にカスタマイズできるGraaf APIも用意されています。

「WIDTH」「COLOMNS」「GUTTER」のそれぞれに値を指定して利用します。
幅: 793px、カラム: 10個、溝: 16pxのグリッドを作成する時は下記のように記述します。