CSS ・ Flexbox・Grid
grid-column / grid-row
アイテムを置く範囲をライン番号で指定
Gridアイテムに書き、「何番目の線から何番目の線まで」を使うかを指定します。grid-column が列（横方向）、grid-row が行（縦方向）です。複数のマスをまたいだ配置ができます。
01
サンプルコード
HTML
1<div class="wrapper">
2 <div class="box_01">要素1</div>
3 <div class="box_02">要素2</div>
4 <div class="box_03">要素3</div>
5 <div class="box_04">要素4</div>
6 <div class="box_05">要素5</div>
7</div>
CSS
1.wrapper {
2 height: 200px;
3 background-color: #ddd;
4 border: #aaa 1px solid;
5 display: grid;
6 grid-template-columns: 1fr 1fr 1fr;
7 grid-template-rows: 1fr 1fr;
8}
9.wrapper div {
10 font-size: 12px;
11}
12.box_01 { background-color: red; }
13.box_02 { background-color: green; }
14.box_03 { background-color: blue; }
15.box_04 { background-color: yellow; }
16.box_05 {
17 background-color: cyan;
18 grid-column: 2 / 3;
19 grid-row: 1 / 3;
20}
02
実行結果
ブラウザでの表示要素5が真ん中の列を上から下まで使い、残りの要素は空いているマスに順に入ります
03
解説
Grid の線には、左上から順に番号が付いています。これを ライン番号 と呼びます。3列×2行のグリッドなら、縦の線は column1〜column4 の4本、横の線は row1〜row3 の3本です（下の「ライン番号の数え方」の図を参照）。
grid-column: 2 / 3; は「列のライン2からライン3まで」、つまり2列目の1マス分を使います。grid-row: 1 / 3; は「行のライン1からライン3まで」なので、1行目と2行目の2マス分の高さになります。
上の例では要素5（.box_05）を真ん中の列に縦長に置いています。位置を指定していない要素1〜4は、空いているマスに左上から順に自動で入ります。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
2 / 3 | ライン2からライン3まで（1マス分） |
1 / 3 | ライン1からライン3まで（2マス分） |
1 / -1 | 最初のラインから最後のラインまで（端から端まで） |
1 / span 2 | ライン1から2マス分（span はマスの数） |
auto | 自動で配置（初期値） |
見出しだけ横いっぱいに広げる
3列のカード一覧で、見出しだけを全列にまたがらせます。
CSS
1.cards {
2 display: grid;
3 grid-template-columns: repeat(3, 1fr);
4}
5.cards__title {
6 grid-column: 1 / -1;
7}
注意点
- 01数字はマスの番号ではなく線（ライン）の番号です。3列のグリッドの右端の線は 3 ではなく 4 になります。
- 02grid-column・grid-row は子要素（アイテム）に書きます。親に書いても効きません。
- 03マスが重なるように指定すると、要素同士が重なって表示されます。
05
ライン番号の数え方
線の番号を見やすくするため、3列×2行のグリッドの各マスに番号を書きました。縦の線（column）は左から 1・2・3・4、横の線（row）は上から 1・2・3 です。
例1：3列×2行のマスとライン番号
マスの左上が「そのマスが始まるライン番号」です。たとえば右下のマスは、列がライン3〜4、行がライン2〜3になります。
HTML
1<div class="grid">
2 <div>列 1/2・行 1/2</div>
3 <div>列 2/3・行 1/2</div>
4 <div>列 3/4・行 1/2</div>
5 <div>列 1/2・行 2/3</div>
6 <div>列 2/3・行 2/3</div>
7 <div>列 3/4・行 2/3</div>
8</div>
CSS
1.grid {
2 display: grid;
3 grid-template-columns: 1fr 1fr 1fr;
4 grid-template-rows: 60px 60px;
5 gap: 6px;
6}
7.grid div {
8 display: grid;
9 place-items: center;
10 background: #3a93c8;
11 color: #fff;
12 font-size: 12px;
13 border-radius: 4px;
14}
ブラウザでの表示
コードと表示の対応
grid-template-columns: 1fr 1fr 1fr;列が3つなので、縦の線は 4本（column1〜column4）できます。grid-template-rows: 60px 60px;行が2つなので、横の線は 3本（row1〜row3）できます。
例2：grid-column: 2 / 3; grid-row: 1 / 3;
スライドと同じ指定です。column2 と column3 の線に挟まれ、row1 から row3 までの範囲を使うので、真ん中の列が縦長の1つのマスになります。
HTML
1<div class="grid">
2 <div></div>
3 <div class="box_05">grid-column: 2 / 3;<br>grid-row: 1 / 3;</div>
4 <div></div>
5 <div></div>
6 <div></div>
7</div>
CSS
1.grid {
2 display: grid;
3 grid-template-columns: 1fr 1fr 1fr;
4 grid-template-rows: 60px 60px;
5 gap: 6px;
6}
7.grid div {
8 background: #cfcbd6;
9 border-radius: 4px;
10}
11.grid .box_05 {
12 grid-column: 2 / 3;
13 grid-row: 1 / 3;
14 display: grid;
15 place-items: center;
16 background: #3a93c8;
17 color: #fff;
18 font-size: 12px;
19 text-align: center;
20}
ブラウザでの表示
コードと表示の対応
grid-column: 2 / 3;列のライン2からライン3まで。真ん中の列の1マス分の幅です。grid-row: 1 / 3;行のライン1からライン3まで。2マス分の高さになります。