グリッドのカラムとガターの計算方法
Web・アプリデザインにおけるグリッドシステムは、画面を一定のカラムに分けて要素を整列させる基準です。カラム幅は(コンテナ幅 − 左右マージン − ガター合計)÷カラム数で計算します。ガターはカラム間の間隔でカラム数より1つ少なく入り、マージンはコンテナの左右外側にそれぞれ1つずつ適用されます。
例えば1200pxのコンテナに12カラム、ガター24px、マージン24pxを適用すると、コンテンツ領域は1200 − 48 = 1152pxになり、ガター合計は24 × 11 = 264pxなので、カラム幅は(1152 − 264)÷12 = 74pxになります。デスクトップは12カラム、タブレットは8カラム、モバイルは4~6カラムグリッドが一般的です。
計算されたカラム幅はCSS Gridのgrid-template-columns、Flexboxのパーセント値、またはfr単位にそのまま適用できます。FigmaやSketchなどのデザインツールでも同じ値でレイアウトグリッドを設定すれば、デザインと開発の整合性を保てます。
よくある質問
ガターとマージンの違いは何ですか?
ガターはカラム間の間隔、マージンはコンテナ左右外側の余白です。
カラム数はいくつが適切ですか?
デスクトップは12カラム、タブレットは8カラム、モバイルは4~6カラムが一般的です。
カラム幅が小数になったらどうすればいいですか?
CSS Gridのfr単位やパーセント値に変換すればレスポンシブでも自然に処理できます。