私がPhotoshopでデザイン作業をするとき、グリッド設定には2種類の単位《10×10》と《8×8》があって、
WEBの場合は《8×8》ばかり多用しています。（マス目が8pixel単位の方眼です）
印刷なら《10×10》が良いのですが、WEBの場合は、独特の法則が働くため、8の倍数でデザインする方がラクできて、キレイに仕上がるからです。
ところが、8グリッドデザインに、Bootstrapを掛け合わせようとすると、面倒な問題が発生します。
ドキュメントのサイズによっては、Bootstrap用のガイドを引くと、ガイドとグリッドがチグハグになってしまい、スナップする時に気を遣います・・・
（もちろんこれは、《10×10》でも起こりえますが、BootstrapはWEBサイト用のフレームワークなので8グリッドを使うことが多いのです）
そもそもBootstrapを採用するということは、レスポンシブなWEBをデザインしているということなので、グリッドは要らないんじゃないか！？と思われるかもしれませんが、いくら可変の世界をデザインしていると云っても、いろいろな要素を、余白を計算しながら配置していく時は、やはり、ガイドがしっかりないとだめなんですよね・・・
グリッドにピターっとくっついてる感があるのと、ないのでは、気持ちのノリが違うので、効率も変わってきてしまうんです・・・
そ・こ・で！！
８pixelグリッドデザインを基本に、可変にBootstrapを採用するWEBデザインを行う時は、独自のルールを採用したPhotoshopのドキュメントサイズを使っています。
絶対に、ピタっと感が違うと思うので、よかったら参考にしてください。
12等分と方眼が合わないとは、どういうこと？
試しに、Photoshopを開いて、新規ドキュメントを作ってみましょう。Photoshopが準備してくれているプリセット（予め用意されているテンプレート）が沢山ありますので、その中から一般的なWEBデザインに用いられるサイズで、作ってみましょう。
1366pixel×768pixelを使ってみます。グリッドは8pixel方眼です。
これに、Bootstrap用のガイドを引いてみます。Bootstrapの標準は左右の余白が15pixelですが、今回は768pixel以下のデバイスサイズでは、左右が8pixelの余白、それ以上のサイズで左右16pixelを取ることにします。（8グリッドデザインなので、8の倍数になるように設定）
残念ながら、8pixel方眼グリッドと、1366pixelから32を引いた1334pixelを12等分しても、111.1666666・・・・という数になるので、8pixelの方眼と12等分のガイドが噛み合いません。
方眼とガイドが噛み合わないと、デザインしてて疲れます
グリッドとガイドの線がピッタリじゃないと、デザインしてても疲れます。気を遣う回数が多くなるからです。それは、作業の効率を上げるためにもよくありません。
そこで、8pixelデザインとBootstrapの両方を採用するときには、整合性が取れるPhotoshopのドキュメントサイズを使用します。
こんな時におすすめ！Photoshopのサイズはコレ！
今回は8pixelデザインを進めるので、標準のBootstrapとは異なる独自のルールがあります。
- ★8pixelデザインなので、方眼の目は8pixelです。
- ★768pixel以下のデバイスサイズでは、左右が8pixelの余白をとります
- ★それ以上のサイズで左右16pixelの余白を取ります
横幅496pixel（sm)
40×12+16=496 ・・・ガイドとガイドの間が40pixel
横幅592pixel（md)
48×12+16=592 ・・・ガイドとガイドの間が48pixel
Bootstrap4のブレイクポイントでいうと @media (min-width: 576px) の部分をデザインする際に使います。
横幅688pixel（md)
56×12+16=688 ・・・ガイドとガイドの間が56pixel
Bootstrap4のブレイクポイントでいうと @media (min-width: 576px) の部分をデザインする際に使います。
横幅992pixel（lg)
80×12+32=992 ・・・ガイドとガイドの間が80pixel
Bootstrap4のブレイクポイントでいうと @media (min-width: 992px) の部分をデザインする際に使います。
横幅1280pixel（xl)
104×12+32=1280 ・・・ガイドとガイドの間が104pixel
Bootstrap4のブレイクポイントでいうと @media (min-width: 1200px) の部分をデザインする際に使います。
いかがでしょうか、これなら、グリッドとガイドが美しいハーモニーを奏でてくれて、作業も捗りそうです♪よければ参考にしてください。
