CSS

グリッドラインに名前をつけよう

グリッドラインに名前をつけて使う方法について見ていきます。

  • グリッドラインの名前の付け方

グリッドラインの名前の付け方

・グリットラインに名前をつけることによってその名前でも指定することができます。例えばグリッドラインにtarget-start, target-endと名前をつけるとその名前で好きな列に指定の要素を割り込ませることができます。

・名前はグリッドの設定のときに[]で指定することができます。入れ込みたい場所の指定なので例えば1列目と2列目を入れ替えたい場合grid-template-colimnsで指定する値で2列めに当たる2番めの数値の前後に[target-staart]と[target-end]を入れ込んで行きます。

・次にどのボックスをtargetの中に入れるのかを指定します。例えばbox1の要素を入れ替えたい場合CSSのbox1のところに書き込んで行きましょう。まず何列目に移動するかを指定するためにgrid-rowで列数を指定します。1列目なら値は1でいいでしょう。

・更にgrid-columnで列を指定します。target-startとtarget-endの間に入れたいのでgrid-column: target-start / target-end;と指定してあげればいいでしょう。

・また -start 、 -end としていれば、短くtarget と書くこともできたりもします。

・このような指定をしておけばターゲットの位置を変えるだけ位置を変えたりできるので便利にgridを使いこなすことができます。

-広告-

 

 






-CSS