🔲 CSS Gridジェネレーター

列数 (columns)行数 (rows)

列の間隔 (px)行の間隔 (px)

生成されたCSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  column-gap: 16px;
  row-gap: 16px;
}

列数(columns)・行数(rows)・列と行の間隔(gap)を指定するだけで、CSS Gridレイアウトのコードを生成するツールです。設定に応じたグリッドのプレビューをその場で確認しながらコードを作成できます。

使い方

列数と行数を入力します。
列の間隔(column-gap)と行の間隔(row-gap)を入力します。
プレビューを確認しながら、生成されたCSSコードをコピーして使用します。

計算の仕組み

CSS Gridは、行と列の両方を使って要素を並べる、2次元のレイアウトの仕組みです。このツールは、列数・行数・間隔を指定すると、プレビューで並び方を確かめながら、コンテナ用のCSSを作ります。・grid-template-columns: repeat(3, 1fr) は、同じ幅の列を3つ作ります・grid-template-rows: 行の高さ・column-gap / row-gap: 列の間と行の間の間隔「fr」は、使える幅（間隔を除いた残り）を分け合う単位です。repeat(3, 1fr) なら、残りの幅を3等分します。列数・行数は1〜12の範囲で指定できます。

計算例

3列×2行、間隔16pxの場合 .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); column-gap: 16px; row-gap: 16px; } 幅 1000px のコンテナなら、間隔2つ分（32px）を除いた968pxを3等分し、1列は約322.7pxになります。

使用上の注意

画面の幅に合わせて列数を自動で変えたい場合は、grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) のような書き方がよく使われます。
1方向に並べるだけならFlexbox、行と列の両方をそろえたいならGridが向いています。
column-gapとrow-gapが同じ値なら、gap: 16px と1行にまとめて書けます。

よくある質問

生成されるコードはどのプロパティを使っていますか?

display: grid、grid-template-columns、grid-template-rows、column-gap、row-gapという、CSS Gridレイアウトの基本的なプロパティを使用しています。

列や行のサイズを均等以外にできますか?

このツールは各列・各行を均等な幅(1fr)で生成します。特定の列だけ幅を変えたい場合は、生成されたgrid-template-columnsの値を手動で編集してください(例: 1fr 2fr 1fr)。

IE11でも使えますか?

生成されるコードは標準的なCSS Gridの記法です。IE11は独自の古い仕様のみサポートしており、このツールが生成するコードとは互換性がありません。モダンブラウザでの利用を想定しています。

🔲 CSS Gridジェネレーター

使い方

計算の仕組み

計算例

使用上の注意

よくある質問

関連ツール