Webページのグリッドを計算する時に便利!全体幅・カラム数・溝の組み合わせのパターンを提示してくれる -Grid.Guide

Webページのグリッドを決める時、全体の幅、カラムの数、溝のサイズ、両端のスペースを元に、グリッドのパターンを提示してくれるオンラインサービスを紹介します。

1px端数がでてしまうといった面倒な計算とは、これでさようならです。

サイトのキャプチャ

Grid.Guide

Grid.Guideの使い方は簡単です。
まずは、サイトにアクセスします。

サイトのキャプチャ

Grid.Guide

全体の幅、カラム数、両端のスペースの値を入力します。

サイトのキャプチャ

サイズと数を設定

全体の幅: 1240、カラム数: 12、両端: 1 に設定してみました。

サイトのキャプチャ

3パターンのグリッド

1240, 12, 1の組み合わせだと、3パターンのグリッドが生成されました。

ここで端数がでてしまうパターンを試してみました。
両端: 2を設定します。

サイトのキャプチャ

両端だけ2に変更

端数がでてしまい、グリッドが生成されない場合は、近い値で代わりの設定が表示されます。

サイトのキャプチャ

代替のグリッド案

代替案もいくつか表示され、その中の1つを選択すると、同様に複数パターンのグリッドが生成されます。

サイトのキャプチャ

代替のグリッド

top of page

©2017 coliss