CSS Gridプレイグラウンド
CSS Gridのプロパティを設定してグリッドレイアウトを視覚的に確認し、CSSコードを生成します。
プレビュー
1
2
3
4
5
6
7
8
9
生成されたCSS
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
column-gap: 8px;
row-gap: 8px;
justify-items: stretch;
align-items: stretch;
}使い方
1. プリセットボタンから列テンプレートを選択するか、直接入力してカスタマイズします。
2. gap・justify-items・align-items などのプロパティを調整します。
3. スライダーでセル数を変更してグリッドの変化を確認します。
4. 「コピー」ボタンで生成されたCSSコードをコピーします。
おすすめサービス
Canva Pro - デザインツール
デザインプロ品質のデザインを簡単作成。テンプレート豊富で初心者にもおすすめ。
Adobe Creative Cloud
デザインPhotoshop・Illustrator等のプロ向けデザインツール。学割あり。
※ PR・広告を含みます