Webページのグリッドを計算する時に便利!全体幅・カラム数・溝の組み合わせのパターンを提示してくれる -Grid.Guide
Post on:2016年9月20日
Webページのグリッドを決める時、全体の幅、カラムの数、溝のサイズ、両端のスペースを元に、グリッドのパターンを提示してくれるオンラインサービスを紹介します。
1px端数がでてしまうといった面倒な計算とは、これでさようならです。

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

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

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

3パターンのグリッド
1240, 12, 1の組み合わせだと、3パターンのグリッドが生成されました。
ここで端数がでてしまうパターンを試してみました。
両端: 2を設定します。

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

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

代替のグリッド
sponsors