デザイン・Web制作
CSS Gridジェネレーター
CSS Gridレイアウトをビジュアルに定義してコードを自動生成。行列のサイズ・単位指定、アイテムの配置調整、5種のプリセットレイアウト対応。CSS・HTML・Tailwindコードをワンクリックコピー。
Rows
Row 1
Row 2
Row 3
Columns
Col 1
Col 2
Col 3
Gap
px
px
プレビュー
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
プリセットレイアウト
コード出力
.container {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
}
.item-1 {
grid-row: 1 / 2;
grid-column: 1 / 2;
}
.item-2 {
grid-row: 1 / 2;
grid-column: 2 / 3;
}
.item-3 {
grid-row: 1 / 2;
grid-column: 3 / 4;
}
.item-4 {
grid-row: 2 / 3;
grid-column: 1 / 2;
}
.item-5 {
grid-row: 2 / 3;
grid-column: 2 / 3;
}
.item-6 {
grid-row: 2 / 3;
grid-column: 3 / 4;
}
.item-7 {
grid-row: 3 / 4;
grid-column: 1 / 2;
}
.item-8 {
grid-row: 3 / 4;
grid-column: 2 / 3;
}
.item-9 {
grid-row: 3 / 4;
grid-column: 3 / 4;
}