レイアウトグリッド計算機（カラム幅・ガター・8ptグリッド）

全体の幅、カラム数、ガター、左右の余白を入力すると、カラム 1 つの幅と複数カラムを合わせた幅が計算されます。Web の 12 カラムグリッドを組むときや、印刷紙面を mm で分割するときに使います。

使い方

1. 「単位」で px か mm を選び、「幅プリセット」から選ぶか「全体の幅」に直接入力します。
2. 「カラム数」「ガター」「余白」を入力します。左右の余白が違う場合は「左右の余白」を「左右別々」にします。
3. 「カラム幅」と「カラムの合計幅」の表を読み、「グリッド単位」で選んだグリッドに合っているかバッジで確認します。合っていなければ案内文の全体の幅を試してください。
4. 「3 つのブレークポイントを比較」をオンにすると 3 つの幅を同時に確認でき、「CSS をコピー」でコードを取得できます。

計算方法と補足

• カラム幅 = (全体の幅 − 左余白 − 右余白 − ガター × (カラム数 − 1)) ÷ カラム数。n カラムの幅 = カラム幅 × n + ガター × (n − 1)。
• 「コンテンツの最大幅」を設定すると、全体の幅がそれより広いときにコンテンツをその幅に収め、残りを左右の余白に分けます。
• mm モードのグリッド単位はポイントです。1 pt = 0.3528 mm、96 dpi では 1 mm = 3.78 px です。
• 入力値はこの端末のブラウザーに保存されます。

よくある質問

1200 px の 12 カラムグリッドのカラム幅は？

ガター 24 px、余白なしなら (1200 − 24 × 11) ÷ 12 = 78 px です。ガターを 32 px にすると 70.67 px になります。

カラム幅が 8 px グリッドに合わないときは？

案内文が最も近い倍数とそれを得る全体の幅を示します。78 px のカラムはコンテンツ幅 1224 px で 80 px になります。ガターや余白を少し変える方法もあります。

A4 の紙面は何カラムにすべき？

決まった答えはありません。文章中心なら 2〜3 カラム、写真や表が混ざるなら 6 か 12 カラムが組み合わせやすいです。A4 210 mm、余白 15 mm、ガター 4 mm を入力して比較してください。

コピーした CSS はどう使う？

.container はコンテンツ幅と左右のパディング、.grid はカラム数とギャップを決めます。複数カラムにまたがる要素には grid-column: span 4 のように書きます。mm モードでは印刷用の @page 余白も含まれます。