CSS Grid Generator

CSS Gridレイアウトをビジュアルに設計できます。カラム、行、ギャップ、アイテム配置をリアルタイムプレビュー付きで定義します。

動作方法: カラムと行でグリッド構造を定義します。トラックサイズ、ギャップ、アイテム配置を調整できます。レイアウトの準備ができたら、生成されたCSSをコピーします。

3
2
8px
8px
11fr
21fr
31fr
11fr
21fr
アイテム 1
アイテム 2
アイテム 3
アイテム 4
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
}

CSS Gridとは

CSS Grid Layoutは2次元レイアウトシステムで、行と列を同時に使用して複雑なWebレイアウトを作成できます。1次元で動作するFlexboxとは異なり、Gridは両軸を完全にコントロールでき、ページレイアウト、ダッシュボード、画像ギャラリーに最適です。

Grid Generatorの使い方

まずカラム数と行数を設定します。fr（分数）、px、autoユニットを使用してトラックサイズを調整します。ギャップコントロールを使用してセル間のスペースを追加します。グリッドアイテムをクリックして、複数のカラムまたは行にまたがるように設定できます。生成されたCSSはリアルタイムで更新されます—準備ができたらコピーしてください。

Grid Template Columns と Rows

grid-template-columns と grid-template-rows プロパティはトラックサイズを定義します。fr ユニットは利用可能なスペースを比例配分します—1fr 2fr は2番目のカラムに2倍の幅を与えます。auto はコンテンツベースのサイジング、minmax() はレスポンシブな範囲、repeat() は繰り返しパターンに使用できます。

CSS Gridの一般的なパターン

  • 12カラムレイアウト：repeat(12, 1fr) で最大の柔軟性を実現
  • ダッシュボード：サイドバー（250px）+ メイン（1fr）、ヘッダーとフッターが全幅をまたぐ
  • 写真ギャラリー：auto-fill と minmax(200px, 1fr) でレスポンシブカラム
  • ブログレイアウト：1fr 3fr でサイドバーとコンテンツ
  • Holy Grail：ヘッダー、3カラムボディ、フッターを grid-template-areas で配置
  • カードグリッド：auto-fit と minmax でレスポンシブな等幅カード