Sphere
Stacking

CSS Gridジェネレーター

CSS Gridレイアウトを視覚的に作成できます。

プリセット

グリッド設定

アイテムをクリックして編集

プレビュー

Item 1
Item 2
Item 3
Item 4
Item 5

生成されたCSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  column-gap: 16px;
  row-gap: 16px;
  align-items: stretch;
  justify-items: stretch;
  align-content: stretch;
  justify-content: stretch;
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-auto-rows: auto;
}