CSS

配置する領域を直感的に指定

要素の配置を直感的に表現できるgrid-template-areasプロパティについて見ていきます。

  • grid-template-areas
  • grid-area

grid-template-areas

・要素を何行目から何行目まで…など数字を使わずに直感的に絵を書くように配置する方法について学んで行きます。

・ grid-template-areas プロパティを使って配置を文字列で表現します。

・縦横がずれないように 1 文字ずつで指定します。

grid-template-areas:

  "r r r y y"

  "r r r y y"

  "c c g y y"

  "c c b y y";

・というふうに指定すると領域をエリアに分けて指定することができます。

・配置したくない箇所がある場合は.を使ってあげるとそのように設定ができます。

・L 字型に配置してしまったり、飛び石のように配置すると、全てが壊れてしまいます。

grid-area

・そのうえで、こちらの赤いボックスに関しては grid-area プロパティで r と指定してあげると、ここで r と指定した領域に配置してくれる、といった仕組みになっています。

・同様に他の色も指定してあげるとそのエリアを配置することができます。

-広告-

 

 






-CSS