はじめに
複雑なレイアウトや「段組み」を作るとき、CSSのgrid（グリッドレイアウト）はとても強力なツールです。
最近は多くのWebサイトで利用されており、flexと並んでモダンなレイアウト技法のひとつとなっています。
この記事では、gridの基本的な使い方と、実際の場面での活用例、注意点などをまとめます。
gridは頻繁に使われる
従来はテーブルや複雑なfloat指定で組んでいたレイアウトも、gridを使えば直感的かつ柔軟に組めます。
特に「縦横両方向」にわたる配置（＝2次元レイアウト）が得意で、カードの一覧や、雑誌風のページ、ダッシュボード画面などでよく使われます。
flexとgridのざっくりした使い分け
- flex：1方向（横並び or 縦並び）で使う場合に最適
- grid：縦横を組み合わせた複雑な配置や、明確な行・列を意識する場合に最適
書き方の例
まずは基本的な使い方から。
1. 基本構文
<div class="grid-container">
<div>アイテム1</div>
<div>アイテム2</div>
<div>アイテム3</div>
<div>アイテム4</div>
</div>
.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列に等分割＆中央寄せ
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
justify-items: center;
gap: 20px;
}
3列に並んだのがわかります。
3. 子要素の位置や「またがり」指定
.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列目の直前まで」という範囲指定です。
→ 開始位置/終了位置（終了は直前まで） という指定方法です。
わかりやすさのため、具体的な例を下に載せます。
<div class="grid-container">
<div>1番目（2列分またがる）</div>
<div>2番目</div>
<div>3番目</div>
<div>4番目</div>
</div>
.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も選択肢に入れてみましょう！