Stax
Tools

CSS Grid Generator

Build CSS Grid layouts visually with live preview.

grid-template-columns

grid-template-rows

1
2
3
4
5
6
7
8
9
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 8px;
}

CSS Grid Generator — 構文を暗記せずにビジュアルで複雑なレイアウトを構築する

CSS Gridはブラウザで利用可能な最も強力なレイアウトシステムで、以前はJavaScriptやハックでしか実現できなかった複雑な2次元レイアウトを作成できます。しかし、構文 — grid-template-columns、grid-template-rows、grid-template-areas、minmax()、repeat()、fr単位 — は急な学習曲線があります。このビジュアルジェネレーターはその障壁を取り除きます。コントロールでグリッドを設定して、プロダクション対応のCSSを即座にコピーしてください。

スライダーを使って列と行の数を設定し、fr単位の入力を使って列テンプレートを設定してください（例：中央が2倍の幅の3列レイアウトには1fr 2fr 1fr）。同様に行テンプレートを設定し、セル間のギャップを調整します。justify-itemsとalign-itemsコントロールを使ってセル内のデフォルトの子の配置を設定します。ライブプレビューには番号付きのセルとともにグリッドが表示されます。満足したら「CSS をコピー」をクリックして、プロジェクトで使用できるグリッドコンテナの宣言を取得してください。

CSS Gridは行と列の両方を同時に制御する必要がある2次元レイアウト — ヘッダー、サイドバー、メインコンテンツ、フッターを含むページレベルのレイアウト、一貫したセルサイズの画像ギャラリー、複数の行や列にまたがる必要があるダッシュボードウィジェット — に強みを発揮します。Flexboxは1次元レイアウトに適しています。ナビゲーションリンクの行、ボタンのグループ、垂直にスタックされたフォームなど。2つのシステムは美しく組み合わせられます — ページのスケルトンにはGridを、各グリッドセル内のコンテンツ配置にはFlexboxを使用します。

フロントエンド開発者はコンポーネントライブラリやデザインシステムにコミットする前に複雑なページレイアウトをプロトタイプするために使用します。Gridを初めて学ぶ開発者は、fr単位とrepeat()が抽象的に考えようとするのではなく、視覚的にスペースをどのように分配するかを理解するために使用します。CSSインストラクターはワークショップで即時の視覚的フィードバックとともにGridの概念を説明するために使用します。コードに移行するデザイナーはFigmaでデザインしたレイアウトを、完全なGrid仕様を暗記することなく素早く実装するために使用します。

このジェネレーターは完全にブラウザ内で動作します — レイアウト設定やCSSの出力はいかなるサーバーにも送信されません。クライアントプロジェクトや企業のファイアウォールの内側で、データに関する心配なく自由に使用してください。

よくある質問

What is CSS Grid?
CSS Grid is a two-dimensional layout system that lets you create complex web layouts with rows and columns simultaneously. Unlike Flexbox (which is one-dimensional), Grid controls both axes at once, making it ideal for page-level layouts.
What does repeat(3, 1fr) mean?
repeat(3, 1fr) creates 3 equal-width columns where each column takes one fraction of the available space. 1fr means one fraction unit — all three columns share the space equally. You can mix units: repeat(2, 1fr) 200px creates two flexible columns and one fixed 200px column.
What is the difference between grid-gap and gap?
gap is the modern property (previously grid-gap). It sets the space between rows and columns. You can set row and column gaps independently with row-gap and column-gap, or use the shorthand gap: row-gap column-gap.
When should I use Grid vs Flexbox?
Use Grid for two-dimensional layouts (rows AND columns simultaneously) like full page layouts, card grids, and complex dashboards. Use Flexbox for one-dimensional layouts (either rows OR columns) like navigation bars, button groups, and centering.
What does fr unit mean?
fr stands for fraction. It represents a fraction of the available space in the grid container. 1fr 2fr 1fr creates three columns where the middle is twice as wide as the outer ones. fr units are calculated after fixed and auto-sized tracks are resolved.

関連ツール