gridの使い方 グリッドcssを理解しよう(グリッドエリア)

はじめに

最近知ったGridのエリアを使ったレイアウトがとても簡単で今まで使っていたflexboxよりも使いやすかったので、使い方をまとめてみました。

グリッド線

はじめにgrid線について、
gridでは

• Y軸が「row」
• X軸が「column」

のように表します。

作成

それでは実際に作ってみます。今回は聖杯レイアウトという形を作っていきます。
形は下のようになります。

---------------------------------------------------------------
| footer                                                      |
---------------------------------------------------------------
| left              | center                 | right          |
---------------------------------------------------------------
| footer                                                      |
---------------------------------------------------------------

html

今回はhtmlをこのようにしておきます。

<div class="oya">
   <div class="grid-header">上</div>
   <div class="grid-left">左</div>
   <div class="grid-center">中央</div>
   <div class="grid-right">右</div>
   <div class="grid-footer">下</div>
</div>

css

それではgridを使っていきます。
まず親要素にdisplay:grid;を指定します。
次にx軸とy軸のサイズを指定。今回は全て100pxにします。
grid-template-rows:　 (行)
grid-template-columns; (列)

.oya {
     display:grid;
     grid-template-rows:100px 100px 100px;
     grid-template-columns:100px 100px 100px;
}

次にgrid-area: ;を用いて子要素に名前をつけます。

.oya {
     display:grid;
     grid-template-rows:100px 100px 100px;
     grid-template-columns:100px 100px 100px;
}

.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:100px 100px 100px;
     grid-template-columns:100px 100px 100px;
　　　grid-template-areas:
     header header header
     left   center right
     footer footer footer;
}

.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と比べて、非常に視覚的でわかりやすいものになっているので皆さんもぜひ使ってみてください！