6XC

CSSグリッドカラム計算機

コンテナ幅・カラム数・ガター(溝)からカラム幅を計算 — コピーしてすぐ使えるCSS Gridコードと、複数カラムにまたがるスパン幅付き。

813回閲覧

カラムの計算式

カラム = (コンテナ幅 − (カラム数−1) × ガター) ÷ カラム数。1200pxのコンテナに12カラム、24pxのガターを設定すると78pxのカラムになります。4カラムにまたがる要素は 4×78 + 3×24 = 384px。このツールはすべてのスパン幅を一覧表示するので、デザインファイルに正確なサイズを反映できます。

CSSではこれらを直接ハードコードすることはほとんどありません: display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px と書けば、ブラウザが計算を行います。ピクセル値は、Figmaのフレームや画像書き出し、ブレークポイントで1frが実際に何pxに解決されるかを理解する上で重要です。

よくある質問

マージンはコンテナ幅に含めるべき?

いいえ — コンテンツ幅(コンテナから左右のマージン・パディングを引いた値)を入力してください。左右120pxのマージンがある1440pxのデザインなら、作業用コンテナは1200pxになります。

12カラムか、それとも別の数か?

12は2、3、4、6で割り切れるため、標準として広く使われるようになりました。密度の高いダッシュボードでは24カラムを使うこともあり、シンプルなマーケティングページなら6や4でも十分です。

関連ツール

CSSグラデーション ジェネレーター ライブプレビューを見ながら線形・放射状・円錐形のCSSグラデーションをデザインし、コードをコピーできます。 使ってみる CSS Box Shadow(ボックスシャドウ)ジェネレーター オフセット・ぼかし・広がり・色・不透明度・内側影(inset)をビジュアルに調整し、ライブプレビューで影をデザインします。 使ってみる CSS Border Radiusジェネレーター 各角を個別に、または一括でpxか%で丸め、ライブプレビューとコピー可能なCSSを確認できます。 使ってみる CSSテキストシャドウ ジェネレーター オフセット・ぼかし・色・不透明度を調整してtext-shadowをデザインし、サンプルテキストでライブプレビューできます。 使ってみる