Gridの便利な使い方3選

# はじめに
こんにちは！
突然ですがみなさんgrid使っていますか？
flexで作れる、何が便利かわからない、という方も多いかと思います。
そこで今回はgridでできる便利なことを紹介してみたいと思います。

一番メジャーな使い方は親要素に`display: grid`を指定してアイテムの繰り返し。
```scss
.grid{
  display: grid;
  gap: 20px 16px;
  grid-template-columns: repeat(3, 1fr);
}
```
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="GRGzQdY" data-user="river_ant" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/river_ant/pen/GRGzQdY">
  ２行で書ける中央揃えa</a> by river (<a href="https://codepen.io/river_ant">@river_ant</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

もう少し応用として`repeat`に`auto-fit, minmax(100px, 1fr)`を使う方法も有名ですね。
実際に画面幅を変えていただくとわかりやすいかと思いますが`auto-fit, minmax(100px, 1fr)`を指定することで最低値が100pxになりアイテムが100px以下になると自動でアイテムを下に移動してくれます。
メディアクエリで調節する必要がなくなるので便利です。
```scss
.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
```
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="QWxYmvK" data-user="river_ant" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/river_ant/pen/QWxYmvK">
  メジャー</a> by river (<a href="https://codepen.io/river_ant">@river_ant</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

それでは他にどんな便利な使い方があるのか紹介していきたいと思います。

## その１　２行で書ける中央揃え
親要素に`place-items: center;`と`display: grid;`を指定することで簡単に子要素を上下左右中央寄せにできます。
```scss
.parent {
 display: grid;
 place-items: center; 
}
```
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="bGKzLVm" data-user="river_ant" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/river_ant/pen/bGKzLVm">
  Untitled</a> by river (<a href="https://codepen.io/river_ant">@river_ant</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## その2　スマホ時レイアウトが変わる時に柔軟に対応できる
例えばこんな感じのコンテンツがあった時。スマホでアイコンを左にタイトルとテキストを右に持っていきたいとします。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="LYrqdJa" data-user="river_ant" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/river_ant/pen/LYrqdJa">
  auto-fit</a> by river (<a href="https://codepen.io/river_ant">@river_ant</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

flexだとdisplay:contentsでスタイルを調整したり、DOM構造を変えなきゃいけなかったりでめんどうですがgridなら

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="XWYOqMG" data-user="river_ant" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/river_ant/pen/XWYOqMG">
  スマホ時レイアウトが変わる時に柔軟に対応できる（PC）</a> by river (<a href="https://codepen.io/river_ant">@river_ant</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

親要素に`display: grid;grid-template-rows: auto auto; grid-template-columns: 120px auto;
 align-items: center;`を移動させたいアイコン要素に`grid-row: 1/3; grid-column: 1/2;`を指定してあげるだけであとはマージン等調整すればDOMをいじらず簡単にできちゃいます。

## その3　absoluteを使わずに要素を重ねる
カードの上にテキストを配置したい時大体absoluteで絶対配置すると思いますが実はgridでもできます。
グリッドアイテムを`grid-area: 1/-1;`にしてエリア全体を指定。
あとはテキストをflexで下寄せにすれば完成。absoluteを使うことなく要素を重ねることができました。
ちなみにgrid-itemはpositionを指定しなくてもz-indexが効くので重なり順も自由に変えることもできます。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="oNyVjgd" data-user="river_ant" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/river_ant/pen/oNyVjgd">
  スマホ時レイアウトが変わる時に柔軟に対応できる（SP）</a> by river (<a href="https://codepen.io/river_ant">@river_ant</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# 最後に
いかかでしたでしょうか！
他にもgap（flexでもできますが）で空きを調節したり、grid-auto-flowで並び順を変えたり、grid-template-areasでグリッドレイアウトのエリアを指定したり、
positionを使わずz-indexで重なり順を調節したり（以下サンプル）...etc
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="gOKMOjW" data-user="river_ant" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/river_ant/pen/gOKMOjW">
  grid z-index</a> by river (<a href="https://codepen.io/river_ant">@river_ant</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

flexと似ていますが双方でできることとできないことがあるのでレイアウトによって使い分けられるといいですね。
flexと同じくアイテムには`***-content,***-items,***-self`も使えるので覚えておいて損はないと思います！

# 参考
https://coliss.com/articles/build-websites/operation/css/less-absolute-positioning-modern-css.html
https://note.com/ebifry/n/n481fcb7ca520