CSS Gridジェネレーター【無料】｜設定するだけでコードを自動生成

CSS Gridとは？初心者にもわかる基本概念

CSS Grid（グリッドレイアウト）は、Webページのレイアウトを「行と列」で構成する、CSSの2次元レイアウトシステムです。

従来のfloatやtableベースのレイアウトでは、要素の横並びやカラム配置に複雑なコードが必要でした。CSS Gridを使えば、行と列を定義するだけで、ヘッダー・サイドバー・メインコンテンツ・フッターといったWebサイトの骨格を直感的に組み立てることができます。

2次元（縦方向と横方向の両方）を同時に制御できるのがCSS Gridの最大の特徴であり、CSSの配置方法としては Flexbox（1次元）と並ぶ現代のWeb制作に欠かせない技術です。

display: grid の書き方

CSS Gridを使うには、親要素（コンテナ）に display: grid; を指定するだけです。

.container {
  display: grid;
}

これだけで、.container の直下の子要素は自動的に「グリッドアイテム」として扱われます。ただし、この状態ではまだ列や行の定義がないため、子要素は縦に1列で並びます。次のステップで列や行の構成を指定します。

grid-template-columns / rows の指定方法

グリッドの列数や幅を定義するのが grid-template-columns、行の高さを定義するのが grid-template-rows です。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3等分の3列 */
  grid-template-rows: auto auto;      /* 2行、高さはコンテンツに応じて自動 */
}

値の指定方法にはいくつかのパターンがあります。

• px（ピクセル）指定：200px 300px 200px → 固定幅の列
• fr（fraction）指定：1fr 2fr 1fr → 利用可能なスペースを比率で分割（1:2:1）
• %（パーセント）指定：25% 50% 25% → コンテナ幅に対する割合
• repeat() 関数：repeat(3, 1fr) → 1fr 1fr 1fr と同じ。列数が多い場合に便利
• minmax() 関数：minmax(200px, 1fr) → 最小200px、最大は均等分割

fr はCSS Grid専用の単位で、「余った空間をどう分けるか」を指定します。レスポンシブデザインとの相性が良く、最も使用頻度が高い単位です。

gap（行間・列間）の設定

グリッドアイテム同士の間隔を設定するには、gap プロパティを使います。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;           /* 行間・列間ともに16px */
}

gap は以下のショートハンドです。

• gap: 16px; → 行間・列間とも16px
• gap: 16px 24px; → 行間16px、列間24px
• row-gap: 16px; → 行間のみ
• column-gap: 24px; → 列間のみ

従来は margin で要素間の余白を調整するのが一般的でしたが、gap を使うと「最初の要素の前」や「最後の要素の後」に余計な余白が付かず、管理が楽になります。レスポンシブ調整でも gap の値を変えるだけで済むため、現在の実務では gap が主流です。

CSS Grid 無料ジェネレーター：使い方3ステップ

CSS Gridジェネレーターは、ブラウザ上でグリッドレイアウトを視覚的に設計し、コピペ可能なHTML＋CSSコードを即時出力できる無料ツールです。

行・列の数、gapのサイズ、レスポンシブ対応の比率指定など、初心者でもノーコード感覚で扱える設計になっています。CSS Gridに不慣れな方でも、手を動かしながら自然に理解を深めることができます。

▶ CSS Grid Generator を使ってみる

ステップ1：行と列の数、gapを選択

UIパネルから直感的に設定できます。行・列の数は最大12列まで対応しており、gapのサイズも自由に調整可能です。fr単位やauto-fitを使ったレスポンシブ設計もパネル上で設定できます。

ステップ2：レイアウトをプレビュー確認

設定内容がリアルタイムでプレビュー表示されます。行・列の比率やgapの大きさを変更すると、即座にグリッドの見た目が更新されるため、試行錯誤しながら理想のレイアウトを探れます。

ステップ3：コードをコピーして使う

「HTMLコピー」「CSSコピー」ボタンでワンクリック取得できます。そのまま自分のプロジェクトに貼り付けるだけで、ジェネレーターで設計したレイアウトを再現できます。

CSS Gridでよく使うプロパティ一覧

CSS Gridには親要素（コンテナ）に指定するプロパティと、子要素（アイテム）に指定するプロパティがあります。それぞれの役割を整理します。

親要素（グリッドコンテナ）のプロパティ

justify-items / align-items は「各セルの中での配置」、justify-content / align-content は「コンテナ内でのグリッド全体の配置」を制御します。名前が似ているので混同しやすいですが、操作対象が異なるという点を覚えておくと迷いにくくなります。

子要素（グリッドアイテム）のプロパティ

grid-column: 1 / 3; のように書くと、そのアイテムは1列目から2列分にまたがって表示されます。これにより、特定の要素だけ幅を広く取ったレイアウト（たとえばヘッダーを全幅にする）が簡単に実現できます。

CSS Gridの実践レイアウト例

ここでは、実際のWebサイトでよく使われるCSS Gridのレイアウトパターンを紹介します。

2カラム（サイドバー＋メイン）レイアウト

ブログやメディアサイトでよく使われる、サイドバー付きの2カラムレイアウトです。

.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 24px;
}

<div class="layout">
  <aside>サイドバー</aside>
  <main>メインコンテンツ</main>
</div>

左側に固定幅250pxのサイドバー、右側に残りスペースを使うメインコンテンツという構成です。1fr が余ったスペースを自動的に埋めてくれるため、コンテナの幅に応じてメインエリアが伸縮します。

モバイルでは1カラムに切り替えたい場合、以下のメディアクエリを追加します。

@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

カード型グリッドレイアウト（レスポンシブ対応）

ポートフォリオやブログ一覧でよく使われるカードレイアウトです。auto-fit と minmax() を組み合わせることで、画面幅に応じて列数が自動的に変わります。

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

<div class="cards">
  <div class="card">カード1</div>
  <div class="card">カード2</div>
  <div class="card">カード3</div>
  <div class="card">カード4</div>
  <div class="card">カード5</div>
  <div class="card">カード6</div>
</div>

このコードのポイントは repeat(auto-fit, minmax(280px, 1fr)) です。各カードは最小280pxを確保しつつ、コンテナの幅に余裕がある限り列数を自動的に増やします。画面が狭くなると自然に折り返されるため、ブレイクポイントを書かなくてもレスポンシブ対応が実現できます。

ヘッダー・メイン・サイドバー・フッターの聖杯レイアウト

Webサイト全体の骨格を構成する、いわゆる「聖杯レイアウト」もCSS Gridなら簡潔に記述できます。grid-template-areas を使うと、レイアウトを文字通り「絵を描くように」定義できます。

.page {
  display: grid;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 16px;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

<div class="page">
  <header class="header">ヘッダー</header>
  <aside class="sidebar">サイドバー</aside>
  <main class="main">メインコンテンツ</main>
  <footer class="footer">フッター</footer>
</div>

grid-template-areas は可読性が高く、HTMLの記述順序に関係なく要素を自由に配置できるのが利点です。レスポンシブ時にはメディアクエリで grid-template-areas を書き換えるだけで、レイアウトの大幅な変更が可能です。

@media (max-width: 768px) {
  .page {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

CSS GridとFlexboxの違い・使い分け

CSS GridとFlexboxはどちらもCSSのレイアウト手法ですが、得意な場面が異なります。

迷ったときの判断基準はシンプルです。「行と列の両方を意識する必要があるか？」を考えて、Yesならグリッド、Noならフレックスボックスが第一選択になります。

たとえば、ヘッダー内のロゴとナビゲーションを横並びにするだけなら Flexbox。ページ全体をヘッダー・サイドバー・メイン・フッターに分割するなら CSS Grid。カード一覧は、1行の中での並びだけ制御するなら Flexbox、行×列の配置を正確に制御するなら CSS Grid が適しています。

実務では両方を組み合わせることも多いです。ページ全体の骨格をGridで組み、ナビゲーションバーの中身はFlexboxで整列させる、というのが典型的なパターンです。

→ Flexboxの使い方は「CSS Flexbox ジェネレーター＆使い方ガイド」で詳しく解説しています。

実務で使えるCSS Grid Tips

現場で使うときに知っておくと便利なテクニックをまとめます。

セレクタをシンプルに グリッドのラッパーに1つのクラスを当て、複雑な入れ子指定は避けます。保守性を優先すると、後からの修正がスムーズです。

auto-fit と minmax() の活用 自動でカラム数を増減させたい場合は grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) のように設定すると、カード一覧が画面幅に応じて自然に折り返します。

minmax(0, 1fr) ではみ出し対策 横スクロールが発生する場合は minmax(0, 1fr) を使うと、コンテンツのはみ出しを抑えやすくなります。1fr 単独だとコンテンツの最小幅が考慮されるため、長いURLやコードブロックがある場合に有効です。

gap を優先して使う 要素間の隙間は margin ではなく gap（row-gap / column-gap）で統一すると、レスポンシブ調整が楽になります。margin と違い、最初と最後の要素に余計な余白が付きません。

grid-template-areas を使うか、ライン番号を使うか grid-template-areas は視覚的にわかりやすいですが、セルが多くなると文字列の管理が煩雑になることもあります。小規模なレイアウトには areas、大規模なレイアウトにはライン番号やライン名を使った配置が向いています。

ブレークポイントは少数精鋭 「モバイル（〜599px）」「タブレット（600〜1023px）」「PC（1024px〜）」の3段階を基本にし、必要な箇所だけ細分化します。すべてを細かく切らない方が保守性が上がります。

まとめ

CSS Gridは、複雑なレイアウトをシンプルなコードで実現できる、現代のWeb制作に欠かせない技術です。

display: grid から始めて、grid-template-columns で列を定義し、gap で余白を整える。この3つのプロパティだけでも、従来のfloatやtableでは難しかったレイアウトが実現できます。さらに grid-template-areas を使えば、ページ全体の骨格を文字通り絵を描くように設計できます。

CSS Gridジェネレーターを使えば、プロパティの動きを視覚的に確認しながらコードを生成できるので、まだCSS Gridに慣れていない方もぜひ活用してください。

▶ CSS Grid Generator を使ってみる

次のステップ

CSS Gridの基本がわかったら、以下の記事もあわせてどうぞ。

• CSS Flexbox ジェネレーター＆使い方ガイド — 1次元レイアウトの定番。Gridとの使い分けも解説。
• CSSセレクター学習ツール — グリッドアイテムの指定に使うセレクタの基礎を学べます。
• CSSプロパティ一覧 — Grid以外のCSSプロパティも体系的にチェック。