前回はGrid CSSの『grid-row』『grid-column』を使用してでレイアウトを組んでみました！
今回はそこから応用的なことをしていきましょう。
グリッド領域に名前をつけて、表示場所の指定に使用する
今回はグリッド領域それぞれに名前をつけて表示場所の指定に使用する方法をご紹介します。
（ちなみに『グリッド領域』の概念についてはこちらをご参照ください）
いまいち最初はピンとこないと思いますので実際の画面などを使いながら説明していきます。
See the Pen
Gridの使い方（ショートハンド） by kkdd (@kk8kk)
on CodePen.
はい、実際に組んでみました。最初の画像と同じようなレイアウトになっているかと思います。
cssだけ抜き出したので、1つずつ解説していきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.gridWrap { display: grid; grid-template-columns:1fr 1fr; grid-template-rows: 200px repeat(2,100px); grid-template-areas: "mainvisual mainvisual" "leftbox rightbox" "footer footer"; } .box01 { grid-area: mainvisual; background: #ef5285; } .box02 { grid-area: leftbox; background: #f4e053; } .box03 { grid-area: rightbox; background: #a5dff9; } .box04 { grid-area: footer; background: #60c5ba; } |
先にグリッド領域の.box01～.box04の方を見ていただくとわかりやすいのですが、『grid-area』プロパティを使用して名前をそれぞれつけています。
そして『display: grid;』を指定している親要素に戻ります。
ここで『grid-template-areas』プロパティを使って、先ほど名前を付けた要素の位置指定ができます！
以前までは『grid-row』『grid-column』で指定したものを、今回は名前で位置の指定をしているような感じです。
|
1 2 3 4 |
grid-template-areas: "mainvisual mainvisual" "leftbox rightbox" "footer footer"; |
位置の指定については各列ごとにダブルクォーテーションで囲んで指定をしていきます。
今回はleftboxとrightboxを横並びにしたいので、『”leftbox rightbox”』のように指定。
上下にあるmainvisualとfooterについては先ほどの『”leftbox rightbox”』の並びに対応して隙間を埋める意味で『”mainvisual mainvisual”』『”footer footer”』のように2つ並べて記述をします。
表示場所を指定したグリッド領域のサイズ調整をする
あとは必要に応じてサイズを調整していきます。|
1 |
grid-template-columns:1fr 1fr; |
各グリッド領域のいわゆる横幅について、今回は2つ並びの考え方なので『grid-template-columns:1fr 1fr;』のように指定をします。px単位でももちろんOKなのでそのあたりはご自由に。
|
1 |
grid-template-rows: 200px repeat(2,100px); |
縦幅については3つ並びなので『grid-template-rows: 200px repeat(2,100px);』のように指定しています。
これはまず最初のメインビジュアルが『200px』の高さ、残り2つについては『100px』という指定になっています。
repeatを指定して『(繰り返しの回数,〇〇px)』のように記述をすると、繰り返しの回数分各グリッド領域に適用してくれるので、同じような要素が並ぶときは少ないコードで楽に指定ができます。
今回のポイント
- 『grid-area』プロパティを使用して、各グリッド領域に名前を設定することができる
- 『grid-template-areas』プロパティを使用して、名前設定したグリッド領域の表示位置を指定ることができる
- サイズ指定については、サイズが同じ要素が並ぶ場合は『repeat』を使用するとわかりやすい
参考になりましたら幸いです！
