グリッドシステムとは？
グリッドシステムはレイアウトを一定のカラムとガターで分割し、視覚的な一貫性を生み出すデザイン手法です。Webデザインでは12カラムグリッドが最も広く使われています。12は2・3・4・6で均等に割り切れるため、さまざまなレイアウトに柔軟に対応できます。
カラム幅の計算式
カラム幅＝（コンテナ幅－ガター×（カラム数－1））÷カラム数です。1200pxコンテナ・12カラム・24pxガターの場合：（1200－24×11）÷12＝（1200－264）÷12＝936÷12＝78pxがカラム幅となります。
CSS Gridでの活用
CSS Gridでは grid-template-columns: repeat(12, 1fr); gap: 24px; と設定するだけでブラウザが自動的にカラム幅を計算します。fr単位を使うとガター分を引いた残りスペースを均等分配できます。Figmaなどデザインツールで正確なpx値を指定する際にこの計算機が役立ちます。
よくある質問
なぜ12カラムが最も一般的なのですか？
12は2・3・4・6で均等に割り切れるため、全幅・半幅・3分の1・4分の1などさまざまなレイアウトを端数なく作れます。この柔軟性が12カラムを最も汎用的なグリッドにしています。
ガターサイズはどう決めればいいですか？
8ptグリッドシステムを採用するなら8の倍数（8・16・24・32px）で設定します。情報密度の高いダッシュボードは16px、余白のあるマーケティングページは24〜32pxが一般的です。