CSS Gridジェネレーター

CSS Gridのレイアウトをインタラクティブに作成。grid-template-columns/rows、gapを設定してCSSコードを生成。

プリセット

列数: 3

行数: 3

grid-template-columns

例: 1fr 2fr 1fr, 200px auto 1fr

grid-template-rows

例: auto 1fr auto

列の間隔: 10px

行の間隔: 10px

CSS コード

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

プレビュー

破線のボックスがGridコンテナ

番号付きのカラフルなボックスがGridアイテム

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

CSS Gridのレイアウトをビジュアルに作成できるツールです。 grid-template-columns、grid-template-rows、gapなどのプロパティをインタラクティブに調整し、リアルタイムでプレビューを確認できます。

2カラムレイアウト、3カラムレイアウト、Holy Grailレイアウトなどの一般的なレイアウトパターンをプリセットとして用意しています。生成されたCSSコードをコピーして、そのまま開発に利用できます。