CSSグリッド ビジュアライザー
列の数・幅・間隔をボタンで切り替えてグリッドレイアウトの変化をリアルタイムで確認しよう
grid-template-columns（列の定義）
grid-template-rows（行の定義）
gap
8px
justify-items（横方向の揃え）
align-items（縦方向の揃え）
1
2
3
4
5
アイテム数:アイテム数: 5
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 8px;
justify-items: stretch;
align-items: stretch;
}使い方
- 左（スマホは下）のコントロールパネルで 「列の設定」や「間隔」をクリック して選ぼう。
- 右（スマホは上）の プレビューエリア に グリッドのレイアウト変化がすぐ反映されるよ。
- 気に入ったレイアウトができたら 「📋 CSSをコピー」 ボタンでコードをコピーして 自分のプロジェクトに貼り付けよう！