CSS Gridジェネレーター

CSS Gridジェネレーターは、行・列の数やサイズ、gap、grid-template-areasによるエリア配置をボタン操作で設定しながら、CSS Gridレイアウトのコードをそのまま生成できる無料ツールです。2カラムや聖杯レイアウトといった実務プリセットを搭載しているため、コードを手入力せずに段組みレイアウトを組みたいWebデザイナーやコーダーに向いています。

• 行・列のサイズ指定
  fr・px・%・auto・minmax()を行・列ごとに個別に設定できます。
• gapの一括・個別指定
  行間と列間のgapを、まとめて、または別々に調整できます。
• エリア配置とドラッグ命名
  プレビュー上をドラッグしてgrid-template-areasのエリア名を直感的に設定できます。
• auto-fillによるカードグリッド
  最小幅を指定するだけで列数が自動調整されるレスポンシブグリッドを生成します。
• テンプレートの1クリック適用
  2カラムや聖杯レイアウトなど定番パターンをワンクリックで反映できます。
• CSS / HTMLコード出力＆コピー
  タブ切替でCSSとHTMLを切替表示。「コピー」ボタンで現在表示中のコードを即コピーできます。

• 2カラム（サイドバー＋メイン）
  固定幅280pxのサイドバーと可変幅のメインカラムを組み合わせた、ブログやコーポレートサイトの定番構成です。
• 3カラム（均等3分割）
  1frを3つ並べた均等カラム。商品一覧や比較セクションの土台として使えます。
• 聖杯レイアウト
  header・nav・main・aside・footerをgrid-template-areasで配置した、ページ全体の骨格を素早く構築できる構成です。
• カードグリッド
  repeat(auto-fill, minmax())を使い、画面幅に応じて列数が自動で増減するレスポンシブな一覧表示を再現します。

• 2カラム・3カラムのレイアウトを組みたいとき
  ブログやコーポレートサイトの基本的な段組みをすぐに用意できます。
• ヘッダー・サイドバー・フッターを含むレイアウトを作りたいとき
  聖杯レイアウトのテンプレートから必要な形に調整できます。
• 商品一覧やブログカードを並べたいとき
  auto-fillで列数が自動調整されるレスポンシブグリッドを生成できます。
• grid-template-areasの書き方を学びたいとき
  エリア名の割り当てとコードの対応関係を見ながら理解できます。
• デザインカンプの段組みをコードに落とし込みたいとき
  行・列のサイズを数値で再現し、そのままCSSとして書き出せます。