Gridレイアウトのアイテム配置

gridアイテムを配置する

前章でグリッド枠の作成を学びましたが、子要素(アイテム)の配置を指定しなければ前から順番に配置されるだけで、flexレイアウトと大差ありません。
今回はアイテムを指定位置に配置する方法を学びます。

Gridアイテムを指定の位置に配置する

gridレイアウトでは「グリッドの開始位置と終了位置」を指定することで任意の場所にアイテム配置できます。

grid線の番号

grid-template-columns、grid-template-rowsで作成したグリッド枠の「線」には1から順に番号が振り分けられています。

1
2
34
2
 
 
34

たとえば色付けした枠は、「3番から4番までの列で、2番から3番までの行」にあります。

この番号を使って、グリッドの位置を指定するのが次の4つのプロパティです。

  • grid-column-start :列の開始番号
  • grid-column-end :列の終了番号
  • grid-row-start :行の開始番号
  • grid-row end :行の終了番号

色付き枠をこれに当てはめると

#{
 grid-column-start: 3;
 grid-column-end: 4;
 grid-row-start: 2;
 grid-row-end: 3;
}

となります。

上の枠を使って、たとえばインスタグラムのように1枚目を大きくとるレイアウトを作ってみるとこうなります。

img:first-of-type{
 grid-column-start: 1;
 grid-column-end: 3;
 grid-row-start: 1;
 grid-row-end: 3;
}

グリッド枠を指定した1枚目の写真以外は、グリッド枠にしたがって順番にレイアウトされていますが、これはgrid-column-start、grid-column-end、grid-row-start、grid-row-end それぞれの初期値が「auto」である為です。

ですので、仮にグリッドアイテムの開始位置だけ指定して終了位置を指定しなかった場合、次のアイテムの開始位置が終了位置となります。

grid-column / grid-row のショートハンド型

gridレイアウトのcolumn 、rowの指定はそれぞれショートハンドで一括指定することが出来ます。
2つだけ覚えておけば良いと思うので2通りの方法を書いておきます。

start / end で指定する

1つ目は、開始位置と終了位置を「/」で区切る方法です。
先ほど使った写真の例だとこうなります。

img:first-of-type{
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

開始位置からの間隔を指定する

もう1つは「span」を使う方法です。

これはhtmlのspanタグとは関係なく、「開始位置からの終了位置までの間隔(スパン)」を指定します。
上の例をspanで書き直すと下記のとおりです。

img:first-of-type{
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

(1番から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>1</div>
 <div>2(absolute)</div>
 <div>3</div>
 <div>4</div>
</div>
/*3カラムのレイアウトを作る */
.grid{
 display: grid;
 grid-template-columns: repeat(3 , 1fr);
 position: relative;
}
/* 2番めのdivにabsoluteを指定し、親要素に覆いかぶさるよう配置して色付け */
.grid div:nth-of-type(2){
 position: absolute;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 background: rgba(250, 0 ,0 ,.5);
}

・grid-column grid-rowを指定していないとき

1
2 (absolute)
3
4

2番めdivに「grid-column: 2 / 3」を指定したとき

1
2 (absolute)
3
4

grid-column、grid-rowの指定なしでは親要素に対する相対位置となるため、absoluteを指定したdivが全体を覆っていますが、grid-column:2/3を指定した場合は2〜3列目に対する相対位置となるため、真ん中に重なっています。

Gridレイアウトに関する記事

23:40まで受講できるから、仕事と両立できるHTML5/CSS3コース[オンライン]

2020年4月13日HTML/CSScss,display_grid

Posted by ミフネWEB