グリッドレイアウトの基本的な使い方

はじめに

今まではIEを考慮してflexboxなどで、レイアウト実装をすることが多かったですが、IEのサポート終了に伴い、これからはグリッドを積極的に使用していくことができます。
そこで改めて基本的な使い方を、まとめようと思います。
※厳密にはIE用のベンダープレフィックスを指定すると、使用できましたがこれからはその必要がなくなりました！

グリッドレイアウトの仕組み

グリッドはレイアウトの親要素となるコンテナとレイアウト内の子要素で作られます。

//HTML
<div class="wrap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

//css
.wrap {
  display: grid;
}

グリッドの列と行

grid-template-columnsプロパティで縦列を指定し、
grid-template-rowプロパティで横行を指定した場合、
2x2グリッドが作成できます。

//HTML
<div class="wrap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

//css
.wrap {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
}

以上グリッドの基本的な使い方を超簡単にまとめてみました。
この他にも便利な機能がたくさんありますので、また別の記事でもまとめたいと思います。