前章でグリッド枠の作成を学びましたが、子要素（アイテム）の配置を指定しなければ前から順番に配置されるだけで、flexレイアウトと大差ありません。
今回はアイテムを指定位置に配置する方法を学びます。
Gridアイテムを指定の位置に配置する
gridレイアウトでは「グリッドの開始位置と終了位置」を指定することで任意の場所にアイテム配置できます。
grid線の番号
grid-template-columns、grid-template-rowsで作成したグリッド枠の「線」には１から順に番号が振り分けられています。
たとえば、上のグリッド表で色付けされている枠は、「3番から4番までの列で、2番から3番までの行」にあります。
この番号を使って、グリッドの位置を指定するのが次の４つのプロパティです。
色付き枠をこれに当てはめると
#{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}となります。
上の枠を使って、たとえばインスタグラムのように１枚目を大きくとるレイアウトを作ってみるとこうなります。
img:first-of-type{
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
グリッド枠を指定した１枚目の写真以外は、グリッド枠にしたがって順番にレイアウトされていますが、これはgrid-column-start、grid-column-end、grid-row-start、grid-row-end それぞれの初期値が「auto」である為です。
ですので、仮にグリッドアイテムの開始位置だけ指定して終了位置を指定しなかった場合、次のアイテムの開始位置が終了位置となります。
grid-column / grid-row のショートハンド型
gridレイアウトのcolumn 、rowの指定はそれぞれショートハンドで一括指定することが出来ます。
２つだけ覚えておけば良いと思うので２通りの方法を書いておきます。
start / end で指定する
１つ目は、開始位置と終了位置を「/」で区切る方法です。
先ほど使った写真の例だとこうなります。
img:first-of-type{
grid-column: 1 / 3;
grid-row: 1 / 3;
}開始位置からの間隔を指定する
もう１つは「span」を使う方法です。
これはhtmlのspanタグとは関係なく、「開始位置からの終了位置までの間隔(スパン)」を指定します。
上の例をspanで書き直すと下記のとおりです。
img:first-of-type{
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}（１番から２つ先まで → 3番で終了）
どちらでも、自分で分かりやすい方を使うと良いでしょう。
グリッドアイテムの重なり
使い方次第ですが、flexにはないgridレイアウトの特徴として、アイテムを重ねることが出来ます。
ここまで見てきたとおり、gridアイテムはグリッドの開始/終了位置を指定することで配置できますが、重なり合ってもエラーにはなりません。
z-indexの項目で解説したとおり、htmlでは後から書いたアイテムが上になります。
逆に、指定を間違って意図せずアイテムが重ならないように注意しましょう。
gridアイテムとpositionの関係
gridアイテムにposition:aboslute を指定した場合、グリッド枠から解放された配置となりグリッドアイテムよりも上に重なります。
absoluteを指定したアイテムは通常のグリッド配置からは外れますが、grid-column、grid-rowを指定することは可能です。
gridとposition:absolute 併用時の注意点
grid-column ・grid-rowを指定しない場合、absoluteアイテムはstatic以外を指定した先祖要素に対する相対位置となります（通常のposition使用時と同じ）。
しかし、grid-column・grid-rowを指定した場合は、その指定されたグリッドに対する相対位置に配置されます。
<div class="grid">
<div>１</div>
<div>２(absolute)</div>
<div>３</div>
<div>４</div>
</div/*3カラムのレイアウトを作る */
.grid{
display: grid;
grid-template-columns: repeat(3 , 1fr);
position: relative;
}
/* 2番めのdiv（色付き）にposition:absoluteを指定し、親要素に重ねて配置 */
.grid div:nth-of-type(2){
position: absolute;
top: 24px;
right: 0;
left: 0;
bottom: 0;
background: rgba(250, 0 ,0 ,.5);
}・grid-column grid-rowを指定していないとき
2番めdivに「grid-column: 2 / 3」を指定したとき
grid-column、grid-rowの指定なしでは親要素に対する相対位置となるため、absoluteを指定したdivが全体を覆っていますが、grid-column:2/3を指定した場合は２〜３列目に対する相対位置となるため、真ん中に重なっています。
[grid_under/]
