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をコピー」 ボタンでコードをコピーして 自分のプロジェクトに貼り付けよう！
このツールでできること
CSS Gridのプロパティ（grid-template-columns、grid-template-rows、gap、justify-items、align-items）を操作して、グリッドレイアウトの変化をリアルタイムで確認できるツールだよ。列数や行数を変えたり、アイテムの配置を調整したりが一瞬でできる。
CSS Gridプロパティ解説
- grid-template-columns
- 列の数と幅を決める。1fr 1fr 1frで3等分、200px 1frで左固定+右可変。レスポンシブの基本。
- grid-template-rows
- 行の高さを決める。autoにすると中身に合わせて自動調整してくれるよ。
- gap
- グリッドアイテム同士の間隔。row-gapとcolumn-gapを個別に指定もできる。
- justify-items
- 各セル内でのアイテムの横方向配置。centerでセル内中央寄せ。
- align-items
- 各セル内でのアイテムの縦方向配置。
よくある質問
- Q. CSS Gridとは何ですか？
- A. CSSのレイアウト方法で、ページを格子状（グリッド）に分割して要素を配置する仕組みだよ。行と列の両方を同時に制御できるのが特徴。
- Q. grid-template-columnsのfrって何？
- A. frは「fraction（分数）」の略で、残りのスペースを比率で分配する単位だよ。1fr 2frなら1:2の比率で分かれる。
- Q. CSS GridとFlexboxどっちを使えばいい？
- A. 1方向の並び（横並びメニュー等）はFlexbox、2方向のレイアウト（ページ全体の構成等）はGridが向いてるよ。両方組み合わせて使うのが一般的。
- Q. レスポンシブなグリッドを作るには？
- A. grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))を使うと、画面幅に応じて列数が自動で変わるよ。
こんな時に使おう
- 写真ギャラリー: repeat(auto-fill, minmax(200px, 1fr))で画面幅に応じた自動レイアウト
- ダッシュボード: 固定サイドバー + メインコンテンツの2カラムレイアウト
- カードグリッド: 均等幅のカードを3列で並べて、スマホでは1列に
このツールと一緒に学ぼう
Gridをもっと深く知りたい
Grid が Flexbox より向いている場面
Flexbox は1方向（横 or 縦）の並びが得意。Grid は2方向（行と列）を同時に制御できる。 「3列×2行のカードレイアウト」「ヘッダー・サイドバー・メイン・フッターの配置」は Grid の方がシンプルに書ける。
でも grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) のような記法は、結果を頭の中で想像するのが難しい。
このビジュアライザーでプロパティを変えながらプレビューすれば、「この値でこうなるのか」が即座に分かる。
中高生の制作で Grid を使う場面
- ポートフォリオの作品一覧 — 3列グリッドで作品カードを並べる。画面幅に応じて2列→1列に自動で切り替わるレスポンシブ対応も Grid なら簡単。
- ダッシュボード風レイアウト — サイドバー + メインコンテンツ + ヘッダーの配置を
grid-template-areasで名前付きで管理。 - 画像ギャラリー — サイズの異なる画像を
grid-auto-flow: denseで隙間なく詰める。Pinterest風のレイアウト。
よくある質問
- Q. Flexbox と Grid、どっちを使えばいい？
- 1方向の並び（ナビバー、ボタン群）→ Flexbox。2方向のレイアウト（ページ全体、カードグリッド）→ Grid。両方使えるようになるのがベスト。
- Q. fr 単位って何？
- fraction（分数）の略。余ったスペースを比率で分配する。
1fr 2frなら 1:2 の比率で分ける。px や % と違って、残りスペースを自動計算してくれる。