cssgridgenerator

CSSグリッドジェネレーター

幅ごとにレイアウトを描く。@media 付きのCSSをそのままコピー。

Open in
1180px

Drag across the grid to draw an area. Arrow keys nudge, Shift + arrows resize.

space to pan · ⌘scroll to zoom
1220px21fr3
1auto21fr3auto4
header1 / 1 / 2 / 3
main2 / 2 / 3 / 3
footer3 / 1 / 4 / 3
nav2 / 1 / 3 / 2

Named areas. The CSS is a picture of the layout, and only the properties that actually change get repeated inside each media query.

.layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  grid-template-areas:
    "header"
    "main"
    "footer";
}

.layout > .header { grid-area: header; }
.layout > .main { grid-area: main; }
.layout > .footer { grid-area: footer; }
.layout > .nav { display: none; }

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 220px 1fr;
    grid-template-areas:
      "header header"
      "nav    main"
      "footer footer";
  }

    .layout > .nav { grid-area: nav; }
}
無料ツール

1つの固定グリッドでは足りない

多くのCSS Gridジェネレーターは、グリッドを1つだけ出力して終わりです。 しかし実際のサイトでは、モバイルで縦に積んだものをデスクトップでは横に並べる、といった 作り分けが必要になります。このツールはブレークポイントごとに配置を描き分けられ、 メディアクエリを書いた状態のCSSを出力します。

How to use it

  1. プレビュー幅を決める

    キャンバス上部のルーラーで再生ヘッドをドラッグすると、その幅にキャンバスが変わり、対応するブレークポイントが編集対象になります。右のパネルに現在のブレークポイント名が常に表示されます。

  2. 領域を描く

    グリッド上をドラッグすると名前付きの領域ができます。各領域は出力されるHTMLの子要素1つに対応し、すべてのブレークポイントで共通です。

  3. トラックのサイズを指定する

    右のトラックパネルで列と行の値を編集します。fr、px、%、auto、min-content、minmax()、repeat() など、トラックリストで有効な記法はすべて使えます。

  4. 次のブレークポイントで描き直す

    再生ヘッドをブレークポイントの目盛りより先へ動かし、自由に配置し直します。変わるのは配置だけで要素は共通のため、出力されるCSSが破綻しません。

  5. コードをコピーする

    CSS、HTML、Tailwind、shadcn/ui の形式で出力できます。CSSには @media ブロックが最初から含まれています。

grid-template-areas という書き方

grid-template-areas は、レイアウトを文字列の並びとして書ける記法です。 CSSを開いた瞬間に配置が目で見て分かるため、行番号・列番号での指定より読みやすくなります。 ただし領域が重なる配置は表現できません。このツールは重なりを検出すると自動的に 番号指定へ切り替えるため、描いたとおりの結果が必ず出力されます。

はみ出しの原因は minmax(0, 1fr) で直る

1fr は「余りを等分する」と説明されますが、正確には最小値が auto です。 そのため中身の大きい要素があるとトラックが押し広げられ、グリッド全体がはみ出します。 長いテキストや画像、overflow: auto を持つ要素でよく起きる問題で、 minmax(0, 1fr) に変えれば最小値が0になり解消します。

Flexbox とどう使い分けるか

行と列を同時に制御したいとき、つまりページ全体の骨組みには CSS Grid が向きます。 ナビゲーションのリンク列やボタンの並びのように一次元に並べるだけなら Flexbox のほうが簡潔です。 実際のサイトでは両方を組み合わせ、外側をGrid、内側をFlexboxにする構成がよく使われます。 Flexbox の各プロパティは Flexboxジェネレーター で試せます。

他のツール

CSSグラデーションジェネレーター · CSSアニメーションジェネレーター · すべてのツール（英語）

Frequently asked questions

CSS Grid とは何ですか？
要素を行と列の二次元で配置するためのレイアウト方式です。Flexbox が一次元（横一列または縦一列）を得意とするのに対し、CSS Grid は行と列を同時に扱えるため、ページ全体の骨組みを組むのに向いています。
このジェネレーターは他と何が違いますか？
ブレークポイントごとにレイアウトを描き分けられる点です。多くのツールは1つの固定グリッドしか出力しませんが、このツールはモバイル・タブレット・デスクトップそれぞれで配置を変え、@media ブロック込みのCSSを出力します。
grid-template-areas と行番号指定はどちらを使うべきですか？
grid-template-areas はCSSを読んだだけでレイアウトが目で見て分かるため、通常はこちらが読みやすくなります。ただし領域が重なる配置は表現できないため、その場合は行番号・列番号での指定が必要です。このツールは重なりを検出すると自動的に番号指定へ切り替えます。
グリッドの子要素がはみ出すのはなぜですか？
1fr の最小値が auto であるためです。中身が大きいとトラックが押し広げられます。minmax(0, 1fr) に変えると最小値が0になり、はみ出しが解消します。長いテキストや画像を含むグリッドでよく起きる問題です。
作ったレイアウトは保存や共有ができますか？
できます。レイアウトはURLのフラグメント部分にエンコードされるため、URLをコピーして送るだけでレイアウトそのものを共有できます。サーバーには何も送信されず、アカウント登録も不要です。
CSS Grid の対応ブラウザは？
2017年以降のすべての現行ブラウザでサポートされています。フォールバックを書く必要は実質的にありません。より新しい subgrid も Firefox 71、Safari 16、Chrome 117 以降で利用できます。