MagicKit.ai

CSS Gridジェネレーター

CSS Gridレイアウトを視覚的に作成。列、行、ギャップ、配置を設定。リアルタイムプレビューと本番用CSSコードのコピー。

3
2
16px
16px
6
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 16px;
justify-items: stretch;
align-items: stretch;
justify-content: start;
align-content: start;
1
2
3
4
5
6

関連ツール

🔒 瞬時に結果表示、AIより速い。登録不要。100%プライベート。