CSS

好きな位置に要素を配置してみよう

グリッドラインの指定方法について、好きな位置に要素を配置する方法について。

  • grid-column
  • grid-row
  • 範囲の指定方法

grid-column

・グリッドレイアウトでは、左の線と上の線が交わるところに配置するように指定ができます。

・このときの横の線をgrid-row 縦の線をgrid-columnプロパティで指定できます。この線を総称してグリッドラインと呼びます。

grid-row

・グリットローは上から何番目かを指定します。一番上を1として2行目を2…というように指定できます。

・もしくはマイナスの数値で指定することもできて、その場合は逆から -1 、 -2 、 -3 といった指定になります。

・グリットカラムも同様に左から何個目の線かを指定します。

・grid-row: 2; grid-column: 2を指定すると上から２番めの線の左から２番めの線が交わるところに左上がひっつくような形で配置されます。

範囲の指定方法

・範囲を指定することもできて、たとえば上から１番目、左から２番めの領域に配置したかった場合 grid-column を ２から 4 までの範囲にすれば良いので、その場合は / で区切って grid-column: 2 / 4; のように書いてあげれば OK です。

・またグリッドラインを調べるのが面倒で、単にここから 2 マス分と指定したかった場合、 grid-column: 2 / span 2; と書いてあげても OK です。

-広告-

 

 






-CSS