はじめに
最近知ったGridのエリアを使ったレイアウトがとても簡単で今まで使っていたflexboxよりも使いやすかったので、使い方をまとめてみました。
グリッド線
はじめにgrid線について、
gridでは
- Y軸が「row」
- X軸が「column」
のように表します。
作成
それでは実際に作ってみます。今回は聖杯レイアウトという形を作っていきます。
形は下のようになります。
---------------------------------------------------------------
| footer |
---------------------------------------------------------------
| left | center | right |
---------------------------------------------------------------
| footer |
---------------------------------------------------------------
html
今回はhtmlをこのようにしておきます。
<divclass="oya"><divclass="grid-header">上</div><divclass="grid-left">左</div><divclass="grid-center">中央</div><divclass="grid-right">右</div><divclass="grid-footer">下</div></div>css
それではgridを使っていきます。
まず親要素にdisplay:grid;を指定します。
次にx軸とy軸のサイズを指定。今回は全て100pxにします。
grid-template-rows: (行)
grid-template-columns; (列)
.oya{display:grid;grid-template-rows:100px100px100px;grid-template-columns:100px100px100px;}次にgrid-area: ;を用いて子要素に名前をつけます。
.oya{display:grid;grid-template-rows:100px100px100px;grid-template-columns:100px100px100px;}.grid-header{grid-area:header;}.grid-left{grid-area:left;}.grid-center{grid-area:center;}.grid-right{grid-area:right;}.grid-footer{grid-area:footer;}最後に親要素で表を作りましょう。
grid-template-areas:;を用いて視覚的に作成できます。
.oya{display:grid;grid-template-rows:100px100px100px;grid-template-columns:100px100px100px; grid-template-areas:headerheaderheaderleftcenterrightfooterfooterfooter;}.grid-header{grid-area:header;}.grid-left{grid-area:left;}.grid-center{grid-area:center;}.grid-right{grid-area:right;}.grid-footer{grid-area:footer;}完成
完成です。flexboxと比べて、非常に視覚的でわかりやすいものになっているので皆さんもぜひ使ってみてください！
