10分ぐらいで理解するGrid Layout

みなさんこんにちは、まえんぬです
この記事はOthlo Tech Advent Calendar 2018の14日目の記事です
cssでレイアウトが組めちゃうGrid Layoutについて解説します

はじめに

まずはこの2つの用語を頭にいれましょう

グリッドコンテナー
レイアウトする枠であり箱です（親要素）
グリッドアイテム
箱の中にいれるものです（小要素）

コードにするとこのようになります
（クラス名はわかりやすい名前で大丈夫です）

<!-- グリッドコンテナー -->
<div class="gd-container">
  <!-- グリッドアイテム -->
  <div class="gd-item gd-A">A</div>
  <div class="gd-item gd-B">B</div>
  <div class="gd-item gd-C">C</div>
  <div class="gd-item gd-D">D</div>
  <div class="gd-item gd-E">E</div>
</div>

実際のブラウザだとまだこんな感じ
（みやすくするためにcssで色とかつけました）

グリッド化

このコードをグリッドレイアウトにするためグリッドコンテナーにdisplay: grid;をいれてみましょう

.gd-container{
  display: grid;
}

すると見た目には変化はありませんがグリッドレイアウトに関するプロパティが使えるようになります

余白をつける

これまで余白をつけるときはmarginやpaddingで行っていましたが
グリッドレイアウトではグリッドコンテナーにgapを指定することで余白をつけることができます

.gd-container{
  gap: 10px;
}

↓こんな感じ！

レイアウトしてみる

レイアウトするときに使う2つのプロパティを紹介します
grid-template-columns　←列の幅を指定（値が高くなるほど横に大きくなる）
grid-template-rows　←行の幅を指定（値が高くなるほど高さが増える）

話が脱線するけどrowsとcolumns、どっちが縦で横なのかわからなくなったら頭文字を大文字にして穴をふさぐ線の向きで縦か横なのかわかるって母ちゃんが言ってた

実際に使うとこんな感じ

縦3×横2のレイアウト

.gd-container{
  grid-template-columns: 200px 400px;
  grid-template-rows: 200px 100px 300px;
}

じゃあ縦横あべこべにするには？
こうです↓

縦2×横3のレイアウト

.gd-container{
  grid-template-columns: 200px 100px 300px;
  grid-template-rows: 200px 400px;
}

つまり指定した値の数だけ行や列ができます
ちなみにfrというグリッドレイアウトのみで使える単位を使って比率で指定することもできます

指定したグリッドアイテムの大きさを変えてみる

次はグリッドアイテムをドンと増やしたこれを使って説明します

CSSもせっかくなのでfrを使ってみました

縦3×横2のレイアウト

.gd-container{
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
}

ではグリッドアイテム「D」を縦横２個分の大きさにしましょう
使うのはgrid-rowとgrid-columnの２つ
変更した「D」のクラスgd-Dにかけてあげましょう

.gd-D{
  grid-column: 1/3;
  grid-row: 2/4;
}

値は何分の何ってみえますが
（始まりの位置）/（終わりの位置）という意味です

この位置のことをラインと呼びます
ラインの数え方は汚い図だけどこんな感じ
青がgrid-column、緑がgrid-rowです
周りの縁も含めることと、数字が１から始まるところに気をつけましょう

ブラウザではこのように表示されます

こんなランダムな大きさもグリッドレイアウトならわりと簡単にできちゃいます

終わりに

今までFlexBoxだとめんどくさかったレイアウト作成もGridLayoutを使えば結構簡単にできることがわかりました

ちなみに今回、アドベントカレンダー7日目の「Animate.cssで遊んでみた」の記事をかかれた「きなこ」さんに誘われ、はじめてqiitaに記事をかいてみました
私はこの記事をかく前まではGridLayoutに関しては名前しか知らなかったのですが
記事をかき終わった今ではもう実際に使えそうな気がします
そう考えると学んだことを記事にするのはいいことだとわかりました

あと、もしよかったら「いいね」を押してください
いいねがつくたびに私「まえんぬ」が喜び、腕立て伏せ10*3セットがんばります

ここまで読んでくださって本当にありがとうございました！