CSS Gridジェネレーター

CSS Gridジェネレーターの使い方

CSS Gridジェネレーターでは、「均等グリッド」と「カスタムグリッド」の2種類からレイアウトを作成できます。設定内容は右側のプレビューへリアルタイムで反映され、完成したCSSとHTMLをそのままコピーできます。

均等グリッドを作成する

「均等グリッド」は、カード一覧・記事一覧・画像ギャラリーなど、複数のアイテムを規則的に並べたい場合に適しています。

「列の設定」では、次の2種類から選択できます。

固定列数

指定した列数で均等にアイテムを配置します。

例えば列数を3にすると、次のようなCSSが生成されます。

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

1frは、Gridコンテナー内の利用可能なスペースを分配する単位です。repeat(3, 1fr)では、同じ幅の列を3つ作成します。

自動折り返し

コンテナーの幅に応じて列数を自動的に変更したい場合に使用します。

例えば、最小列幅を240pxに設定すると、次のようなCSSを作成できます。

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

minmax(240px, 1fr)では、各列の幅を最低240px確保しながら、余ったスペースがある場合は均等に広げます。

「Auto Fit」と「Auto Fill」では、アイテム数が少ない場合の列の扱いが異なります。

• Auto Fit：アイテムが少ない場合、空の列を折りたたんで配置済みの列を広げます。
• Auto Fill：アイテムが少ない場合でも、空の列を残して列幅を維持します。

アイテム数が十分に多い場合は、Auto FitとAuto Fillで見た目の違いが出ないことがあります。

アイテム数を変更する

均等グリッドでは、「アイテム数」からプレビューに表示するアイテムの数を変更できます。

この値はGridのCSSには含まれませんが、HTMLタブでは指定したアイテム数に応じたHTMLが生成されます。

例えばアイテム数が3の場合は、次のようなHTMLになります。

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

カスタムグリッドを作成する

「カスタムグリッド」では、列数・行数・各列や行のサイズを個別に設定し、アイテムを好きな範囲へ配置できます。

「列サイズ」「行サイズ」には、例えば次のようなCSS Gridの値を指定できます。

1fr
200px
12rem
30%
auto
minmax(160px, 1fr)

例えば、3列をすべて1frに設定すると、3列が同じ幅になります。

grid-template-columns: repeat(3, 1fr);

一方、1列目を240px、残りを1frにすると、固定幅と可変幅を組み合わせたレイアウトを作成できます。

grid-template-columns: 240px 1fr 1fr;

アイテムを配置する

カスタムグリッドの「アイテムの配置」では、グリッド上をドラッグしてアイテムを配置する範囲を指定できます。

配置済みのアイテムは、本体をドラッグして別のセルへ移動できます。また、アイテムの四辺をドラッグすると、配置する行・列の範囲を直感的に変更できます。

アイテムを選択すると、「Column Start / Column End」「Row Start / Row End」から開始・終了位置を数値で細かく調整することもできます。

例えば、

Column Start: 2
Column End: 4
Row Start: 1
Row End: 3

と設定した場合は、次のCSSが生成されます。

.grid-item:nth-child(2) {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

CSS Gridでは、セルそのものではなく「グリッドライン」の番号を使って配置範囲を指定します。2 / 4は、2番目のグリッドラインから4番目のグリッドラインまでを使用するという意味です。

選択状態のアイテムは、設定欄に表示される「削除」ボタンから削除も可能です。

行・列の間隔を調整する

「Row Gap」と「Column Gap」では、行方向と列方向の間隔を調整できます。

下記の通り、gapの値の1つ目に行方向、2つ目に列方向の値が出力されます。

gap: 16px 24px;

両方が同じ値の場合は、次のようにショートハンドで出力されます。

gap: 16px;

アイテムの位置を調整する

「Justify Items」と「Align Items」では、各グリッド領域の中でアイテムをどの位置に配置するかを調整できます。

• Justify Items：横方向（インライン方向）の配置
• Align Items：縦方向（ブロック方向）の配置

Start、Center、End、Stretchなどを選択し、プレビューで違いを確認できます。

プレビューで表示を確認する

画面右側のプレビューに、設定した内容がリアルタイムで反映されます。確認しながらカスタマイズ項目の値を調整してください。

プレビュー上部の「プレビュー幅」を変更すると、Gridコンテナーの幅を変えながらレイアウトを確認できます。特に「自動折り返し」を使用している場合は、プレビュー幅を狭くしたり広くしたりすることで、列数がどのように変化するかを確認できます。

プレビュー幅は確認用の設定であり、生成されるCSSには含まれません。

クラス名を変更する（任意）

「詳細設定」を開くと、Gridコンテナーとアイテムのクラス名を変更できます。

例えば、

コンテナーのクラス名: cards
アイテムのクラス名: card

と設定すると、生成されるCSSとHTMLの両方に反映されます。

<div class="cards">
  <div class="card">1</div>
  <div class="card">2</div>
</div>

CSS・HTMLをコピーする

生成コードは「CSS」「HTML」タブから切り替えて確認できます。

CSSタブには現在のGrid設定に必要なスタイルが、HTMLタブにはプレビューのアイテム構成に対応したHTMLが表示されます。「コピーする」ボタンから、そのままクリップボードへコピーできます。

CSS Gridとは？

CSS Gridは、Webページの要素を行と列のグリッド状に配置できるCSSのレイアウト方式です。

基本的には、親要素にdisplay: gridを指定し、列や行の構成を設定します。

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

この例では、コンテナー内を同じ幅の3列に分け、アイテム同士に16pxの間隔を設定しています。

fr単位とは？

frは、Gridコンテナー内で利用できるスペースを分配するための単位です。

例えば、

grid-template-columns: 1fr 1fr 1fr;

では、利用可能な幅を3等分します。

grid-template-columns: 1fr 2fr;

では、1列目と2列目をおおよそ1:2の割合で配置します。

固定幅と組み合わせることもできます。

grid-template-columns: 240px 1fr;

この場合、1列目は240pxに固定し、2列目が残りのスペースを使用します。

repeat()とは？

repeat()を使うと、同じ列や行の指定を繰り返して記述できます。

次の2つは同じ意味です。

grid-template-columns: 1fr 1fr 1fr;

grid-template-columns: repeat(3, 1fr);

列数の多いレイアウトでもコードを簡潔に書けるため、均等なグリッドでよく使用されます。

minmax()とは？

minmax()は、Gridの列や行に最小値と最大値を設定するための関数です。

grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

この例では、各列が240pxより小さくならない範囲で、コンテナー幅に合わせて列数や列幅が調整されます。

レスポンシブなカード一覧やギャラリーを、メディアクエリを細かく指定せずに作成したい場合に便利です。

Auto FitとAuto Fillの違い

auto-fitとauto-fillは、repeat()の中で使用し、コンテナーの幅に応じて作成する列数を自動的に調整するための値です。minmax()と組み合わせることで、レスポンシブなグリッドを作成できます。

grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));

どちらも各列の最小幅を保ちながら、コンテナー幅に応じて列数を調整します。違いは、アイテム数が作成可能な列数より少ない場合の空の列の扱いです。

• Auto Fit：空の列を折りたたみ、配置済みの列を広げます。
• Auto Fill：アイテムが配置されていない空の列も残し、列幅を維持します。

Auto Fit（空の列を折りたたむ）
┌──────────────┬──────────────┐
│    Item 1    │    Item 2    │
└──────────────┴──────────────┘

Auto Fill（空の列を残す）
┌─────────┬─────────┬─────────┐
│ Item 1  │ Item 2  │  Empty  │
└─────────┴─────────┴─────────┘

アイテム数が十分に多く、作成された列がすべて使用されている場合は、見た目に違いが出ないことがあります。

グリッドラインとは？

CSS Gridでは、列や行の境界を「グリッドライン」として扱います。

3列のGridには、列方向のグリッドラインが4本あります。

1       2       3       4
| 列1   | 列2   | 列3   |

例えば、

grid-column: 1 / 3;

と指定すると、1番目のラインから3番目のラインまで、つまり2列分を使用します。

行方向も同様です。

grid-row: 1 / 3;

本ジェネレーターのカスタムグリッドでは、この開始・終了位置を視覚的に確認しながら設定できます。

CSS GridとFlexboxの違い

CSS Gridは、行と列の両方を使った2次元のレイアウトに向いています。

一方、Flexboxは横一列または縦一列を基準とする1次元のレイアウトを得意としています。

例えば、カード一覧やページ全体のエリア分け、複数の行・列にまたがるレイアウトにはGridが適しています。ナビゲーションやボタンの横並びなど、一方向の配置にはFlexboxが使いやすい場合があります。

どちらか一方だけを使う必要はなく、Gridで大きなレイアウトを作り、その内部でFlexboxを使うといった組み合わせも一般的です。

FAQ

grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));