【初心者向け】CSS Grid完全ガイド｜自由自在なレイアウトを作ろう！

1. CSS Gridとは？
2. Gridの基本構造
3. よく使うGridプロパティまとめ
1. 【親要素に使うプロパティ】
2. 【子要素に使うプロパティ】
4. Gridの便利な使い方
1. 自動で列を調整する
まとめ

1. CSS Gridとは？

CSS Grid（グリッドレイアウト）は、**行（row）と列（column）**を使って、ページをきれいに整理してデザインできる方法です。Flexboxが「一方向（横か縦）」に強いのに対して、Gridは「縦横の二方向」でレイアウトできるのが特徴です。

ポイント

複雑なレイアウトも少ないコードで実現できる
レスポンシブデザインにも強い
きれいな枠組みを作れる

2. Gridの基本構造

まずは親要素に display: grid; を設定します。

<div class="grid-container">
  <div class="item">アイテム1</div>
  <div class="item">アイテム2</div>
  <div class="item">アイテム3</div>
  <div class="item">アイテム4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2列に分ける */
  gap: 20px; /* アイテム同士の間隔 */
}
.item {
  background: #81c784;
  padding: 20px;
  color: #fff;
  text-align: center;
}

この例では、2列にアイテムが並びます！

3. よく使うGridプロパティまとめ

【親要素に使うプロパティ】

プロパティ	効果	例
`display: grid;`	Gridレイアウトを使う	`display: grid;`
`grid-template-columns`	列の幅を指定	`1fr 1fr 1fr`（均等に3列）
`grid-template-rows`	行の高さを指定	`100px 200px`（最初100px、次200px）
`gap`	行と列の間隔を設定	`gap: 20px;`
`justify-items`	各アイテムの横方向の位置揃え	`center`、`start`、`end`
`align-items`	各アイテムの縦方向の位置揃え	`center`、`stretch`

【子要素に使うプロパティ】

プロパティ	効果	例
`grid-column`	どの列にまたがるか	`grid-column: 1 / 3;`（1列目から3列目まで）
`grid-row`	どの行にまたがるか	`grid-row: 1 / 2;`（1行目だけ）

4. Gridの便利な使い方

自動で列を調整する

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

この書き方をすると、画面サイズに合わせて自動で列数が変わります。レスポンシブ対応もバッチリ！

まとめ

CSS Gridを使えば、Webページのレイアウトを「表のように」整理して作れるようになります。 Flexboxと組み合わせると、さらに自由度がアップしますよ！

次回は、FlexboxとGridを組み合わせた実践的なレイアウト例も紹介していきます！お楽しみに！

Flexbox基本はこちら