はじめに

複雑なレイアウトや「段組み」を作るとき、CSSのgrid（グリッドレイアウト）はとても強力なツールです。
最近は多くのWebサイトで利用されており、flexと並んでモダンなレイアウト技法のひとつとなっています。
この記事では、gridの基本的な使い方と、実際の場面での活用例、注意点などをまとめます。

gridは頻繁に使われる

従来はテーブルや複雑なfloat指定で組んでいたレイアウトも、gridを使えば直感的かつ柔軟に組めます。
特に「縦横両方向」にわたる配置（＝2次元レイアウト）が得意で、カードの一覧や、雑誌風のページ、ダッシュボード画面などでよく使われます。

flexとgridのざっくりした使い分け

flex：1方向（横並び or 縦並び）で使う場合に最適
grid：縦横を組み合わせた複雑な配置や、明確な行・列を意識する場合に最適

書き方の例

まずは基本的な使い方から。

1. 基本構文

index.html

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

style.css

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2列で均等に分割 */
  grid-gap: 16px;                /* アイテム間にスペース */
}

この例では、アイテムが2列ずつ並びます。

2. よく使うプロパティ

プロパティ	役割	例
`grid-template-columns`	列の幅を指定	`1fr 2fr 1fr`, `100px auto 200px`など
`grid-template-rows`	行の高さを指定	`auto 1fr 2fr`など
`gap` / `grid-gap`	行・列の間隔を指定	`gap: 24px;`
`grid-column`, `grid-row`	子要素の「またがり」や位置を指定	`grid-column: 1 / 3;`
`justify-items`, `align-items`	アイテムの揃え方（横/縦）	`center`, `stretch`など

例：3列に等分割＆中央寄せ

style.css

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
  gap: 20px;
}

3列に並んだのがわかります。

3. 子要素の位置や「またがり」指定

style.css

.grid-container > div:nth-child(1) {
  grid-column: 1 / 3; /* 1列目から2列目までまたがる */
}

アイテム１が２列分を占有していることがわかります。

またがりについて詳しく解説

grid-container > div:nth-child(1)
→ これは、.grid-container の最初の子要素（1番目のdiv）を指定しています。
grid-column: 1 / 3;
→ これは、その要素がグリッドの1列目から3列目の手前まで（＝1列目と2列目）の2列分を「横にまたがる」ことを意味します。

図解イメージ
もしgrid-template-columns: 1fr 1fr 1fr;の3列グリッドの場合、

[1]	[2]	[3]

この指定をすると、1番目のdivは 1列目〜2列目までの2列分を使って横長に表示されます。

よくある用途

カードリストの「見出し」だけ幅を広げたいとき
画像ギャラリーでメイン画像だけ大きく見せたいとき
ダッシュボードで目立たせたいウィジェット

ポイント

grid-column: 1 / 3;
→ 「1列目から3列目の直前まで」という範囲指定です。
→ 開始位置/終了位置（終了は直前まで）という指定方法です。

わかりやすさのため、具体的な例を下に載せます。

index.html

<div class="grid-container">
  <div>1番目（2列分またがる）</div>
  <div>2番目</div>
  <div>3番目</div>
  <div>4番目</div>
</div>

style.css

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.grid-container > div:nth-child(1) {
  grid-column: 1 / 3;
}

この場合、1番目のdivだけ「横幅2列分」使って広く表示されるのがポイントです。

使いどころ

gridは下記のような場面で特に活躍します。

カード一覧（ギャラリー/商品リスト）
→ 行・列を指定するだけで複雑なリストも簡単に実装
雑誌や新聞風の段組み
→ 縦横にまたがるレイアウトもCSSだけで可能
ダッシュボードUI
→ ウィジェットのような複数のエリアを柔軟に分割
レスポンシブなカラム切り替え
→ メディアクエリと併用で1カラム/2カラム/3カラムなど簡単切り替え

補足：よくある失敗例や注意点

display: grid;の指定を忘れがち
アイテム数がgrid指定に満たない／多すぎる場合の見え方に注意
余白（gap）が行・列両方に効く点を意識

最後に

gridを使うことで、CSSだけで直感的かつ強力なレイアウトを実現できます。
まだ使ったことがない方も、まずは小さなパーツから試してみてください。
「flexじゃちょっと苦しい…」と思ったら、ぜひgridも選択肢に入れてみましょう！