デザイン・Web制作

CSS Gridジェネレーター

最大12行×12列のCSS Gridをビジュアルに定義。アイテム配置・背景色と5種のプリセットに対応し、CSS・HTML・Tailwindコードを生成・コピーできます。

登録不要

行

最大12行

列

最大12列

間隔

プレビュー

プリセットレイアウト

コード出力

.container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.grid-item-1-1 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  background-color: #fca5a5;
  color: #000000;
}

.grid-item-2-2 {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  background-color: #fdba74;
  color: #000000;
}

.grid-item-3-3 {
  grid-row: 1 / 2;
  grid-column: 3 / 4;
  background-color: #fcd34d;
  color: #000000;
}

.grid-item-4-4 {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  background-color: #bef264;
  color: #000000;
}

.grid-item-5-5 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  background-color: #6ee7b7;
  color: #000000;
}

.grid-item-6-6 {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
  background-color: #67e8f9;
  color: #000000;
}

.grid-item-7-7 {
  grid-row: 3 / 4;
  grid-column: 1 / 2;
  background-color: #93c5fd;
  color: #000000;
}

.grid-item-8-8 {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
  background-color: #c4b5fd;
  color: #000000;
}

.grid-item-9-9 {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
  background-color: #f9a8d4;
  color: #000000;
}

このツールについて問い合わせる →

CSS Gridジェネレーターについて

CSS Gridとは

CSS Grid Layout（CSS グリッドレイアウト）は、CSSの強力なレイアウトシステムです。2次元（行と列の両方）でレイアウトを定義でき、従来のfloatやflexboxだけでは難しかった複雑なページレイアウトを直感的に構築できます。

2017年に主要ブラウザでサポートされて以来、Webサイトのレイアウト設計の標準的な手法となっています。本ツールでは、コードを手書きする代わりに、視覚的にグリッドを定義し、自動でCSS・HTML・Tailwindコードを出力します。

CSS Gridの主要プロパティ

プロパティ説明例
grid-template-columns列のサイズ定義1fr 2fr 1fr
grid-template-rows行のサイズ定義auto 1fr auto
gap行間・列間の余白16px 8px
grid-columnアイテムの列スパン1 / 3
grid-rowアイテムの行スパン1 / 2

本ツールではこれらのプロパティを視覚的に設定し、CSSコードを自動出力します。fr（fraction）、px、%、auto、minmax(0, nfr) の各指定に対応しています。行・列はそれぞれ1〜12、間隔は0〜200px、アイテムは最大50個です。

アイテム名はHTMLのテキストとしてエスケープし、CSS用クラス名には連番を付けます。同じ名前や日本語名を使ってもセレクタが衝突しません。設定した背景色はCSSとTailwind出力へ反映し、文字色には暗色または白のうち背景とのコントラストが高い方を使用します。出力は貼り付け先の設計やTailwind設定に合わせて確認してください。

プリセットレイアウト

  • Holy Grail: ヘッダー・フッター・メインコンテンツ・両サイドバーの5エリア構成。伝統的なWebレイアウトの定番
  • Dashboard: サイドバー＋カードグリッド。管理画面やダッシュボードに最適
  • Blog: ヘッダー・コンテンツ・サイドバー・フッターの4エリア。ブログやメディアサイト向け
  • Gallery: 均等なカラムのグリッド。写真ギャラリーや商品一覧に
  • Magazine: 大小混在のカード配置。雑誌風レイアウトやニュースサイト向け

FlexboxとGridの使い分け

Flexboxは1次元（横方向または縦方向の一方向）のレイアウトに適しています。ナビゲーションバー、ボタン並び、カード内部のレイアウトなどに最適です。

CSS Gridは2次元（行と列の両方）のレイアウトに適しています。ページ全体の構成、ダッシュボード、ギャラリーなどに最適です。

実際のWebサイトでは、ページ全体のレイアウトをCSS Grid、コンポーネント内部のレイアウトをFlexboxで構築する組み合わせが一般的です。

よくある質問

Q. frという単位は何ですか？
fr（fraction）はCSS Gridで使える単位で、グリッドコンテナの余剰スペースを比率で分配します。例えば「1fr 2fr 1fr」と指定すると、3列が1:2:1の比率で幅を分けます。pxや%と組み合わせて使うことも可能です。
Q. CSS Gridのブラウザ対応状況は？
現在の主要ブラウザではCSS Gridが広く利用できます。ただし、組み込みブラウザや古いブラウザも対象にする場合は、利用する各プロパティの互換性をMDNなどで確認し、実際の対象環境でテストしてください。
Q. Tailwindコード出力はどの程度正確ですか？
1frの均等な1〜12行・列には標準のgrid-rows-*／grid-cols-*を使い、それ以外のトラックと各アイテムの配置にはarbitrary values（角括弧記法）を使います。生成文字列をTailwindが検出できるソースへ静的に貼り付け、導入中のTailwindバージョンとビルド設定で確認してください。
Q. アイテムを複数セルにまたがらせるには？
プレビューでアイテムをクリックして選択し、表示される設定パネルで行開始/終了、列開始/終了の値を変更します。例えば列を1〜3に設定すると、2列分にまたがるアイテムになります。
このツールを評価
1.0(1件)