ホーム Design ToolsCSS Grid ジェネレーター

CSS Grid ジェネレーター

CSS Gridレイアウトをビジュアルに生成。列・行・ギャップを調整してコードを出力。

Columns: 3

Rows: 2

Items: 6

Column Gap: 8px

Row Gap: 8px

CSS Code

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
column-gap: 8px;
row-gap: 8px;