CSS Gridジェネレーター

Q: アイテムを全幅にまたがらせるにはどうしますか。

grid-columnを `1 / -1` に設定します。-1は最後のグリッド線を指します。

CSS Gridレイアウトを視覚的に作成します。grid-template-columns/rows、検証付きの名前付きエリア、gap、揃え、アイテムごとの配置に対応し、きれいなCSSをコピーできます。

プリセット

コンテナ

grid-template-columns

grid-template-rows

grid-template-areas

1 行につき 1 行分、名前はスペース区切り、空セルはドット（.）。各名前は長方形になる必要があります。

column-gappx

row-gappx

justify-items

align-items

アイテム数

アイテム 1

ここでアイテムを選ぶか、プレビュー内でクリックしてください。

grid-column

grid-row

grid-area

例：1 / 3、span 2、2 / -1。エリア名を指定するとライン指定より優先されます。

プレビュー

プレビューの右下隅をドラッグするとコンテナのサイズを変えられます。

CSS コード

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

CSS Gridジェネレーターとは？

任意のトラックテンプレート（たとえば repeat(auto-fill, minmax(120px, 1fr))）を入力し、名前付きエリアを描き、gapと揃えを設定して、個々のアイテムを行番号、span、エリア名で配置できる、CSS Gridのレイアウトビルダーです。ライブプレビューには、生成されたCSSが使われます。

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

プリセット（3 カラム、レスポンシブカード、聖杯レイアウト、サイドバー、ベントー）から始めるか、grid-template-columnsとgrid-template-rowsを入力します。
必要に応じてgrid-template-areasを書きます。1行が1行分で、名前はスペース区切り、空のセルはドットです。
row-gap、column-gap、justify-items、align-items、アイテム数を設定します。
アイテムを選び、grid-column、grid-row（例: 1 / 3、span 2）を設定するか、grid-areaを選びます。
CSSコードをコピーします。

例

入力

grid-template-columns 200px 1fr, row-gap 8px, column-gap 16px; item 2: grid-column 1 / 3, grid-row span 2

出力

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

.item-2 {
  grid-column: 1 / 3;
  grid-row: span 2;
}

CSS Gridジェネレーターを使うべき場面

gridは、ページの骨組み、ダッシュボード、ギャラリー、カードグリッドといった二次元のレイアウトに使います。内容に応じたサイズにしたい、1行または1列のアイテムなら、flexboxのほうが簡単なことが多いです（CSS Flexbox Generatorを参照）。

CSS Gridジェネレーターの仕組み

テンプレートと配置の値は、ブラウザ自身の CSS.supports() で検査されるため、CSSで有効なものはすべて受け付けられ、無効な値は指摘されます。エリアのテキストは検証され、すべての行が同じ数のセルを持ち、各名前が1つの長方形になっている必要があります。出力には、display: grid、各テンプレート、1行につき1つの引用符付き文字列の grid-template-areas、gap（行と列のgapが等しければ1つの値、そうでなければ row column）、stretch でない場合のみの揃えが含まれます。アイテムには、設定した場合のみ grid-area または grid-column/grid-row のルールが付きます。