【CSS Grid 応用編】位置と大きさの指定/auto-fillとauto-fit

前回（[【CSS Grid 基本編】grid\-template\-columns/rows、gapについて \- Qiita](https://qiita.com/super-mana-chan/items/6f07ffc777a39842ec9c)）は CSS grid の基本的な使い方をまとめたので今回は応用編。


# 位置と大きさを指定する`grid-template-areas`と`grid-area`
例えば、簡単にWEBサイトでよく見るようなレイアウトがgridで簡単に組める。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/abb67cb4-525b-490f-9b6d-c1ffc7987e42.png)
親と子に指定する必要があり、
* 子に`grid-areas`で名前を指定してあげる。
* 親の`grid-template-areas`で子に指定した`grid-areas`の名前で位置と大きさを決める。


## 子に`grid-areas`で名前を指定してあげる。
```html:HTML
<div class="wrapper">
  <div class="header">header</div>
  <div class="sidebar">sidebar</div>
  <div class="main">main</div>
  <div class="footer">footer</div>
</div>
```
```css:子
.header{
  grid-area: header;
}
.sidebar{
  grid-area: sidebar;
}
.main{
  grid-area: main;
}
.footer{
  grid-area: footer;
}
```

## 親に`grid-template-areas`を指定

`grid-template-columns`と`-rows`で列と行を決め、 
**`grid-template-areas`** を指定。

（今回は横3×縦4の均等なグリッドで説明）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/401212c1-ada8-0313-90ea-970dc544894a.png)

```scss:grid-template-areas
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "sidebar main main"    
    "footer footer footer";
```
`grid-template-areas`は`""`内を1行として、スペースを開けて列の指定する。
絵と同じ見た目でかけるからかなり感覚的に指定できる。
## CODEPEN
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="dymRYyJ" data-user="himeka223" 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/himeka223/pen/dymRYyJ">
  Untitled</a> by himeka223 (<a href="https://codepen.io/himeka223">@himeka223</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


# `auto-fit`と`auto-fill`、`minimax`の組み合わせで簡単にレスポンシブ、折返しができる！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/7a7b3998-c372-4a98-e1f6-b0b754cc1f62.png)
```scss:auto-fit
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
```
```scss:auto-fill
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
```
上はどちらも **100px~1fr** に伸縮する指定。
縮めなくなったら(100px以下)、段落ち。
`repeat()`で繰り返す回数ではなく`auto-fit`と`auto-fill`を指定することで自動で判断してくれる。
* `auto-fit`は子の数分のグリッドができるので横幅いっぱいに見える
* `auto-fill`は子の幅を基準にグリッドができ、余るグリッドができる


## CODEPEN
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="JjLJXPo" data-user="himeka223" 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/himeka223/pen/JjLJXPo">
  Grid/auto-fit,-fill</a> by himeka223 (<a href="https://codepen.io/himeka223">@himeka223</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# まとめ
他にもgridの指定は色々ありそうだけど、この辺を押さえておけば使いこなせそう

# 参考サイト
[これは便利！CSS Gridのauto\-fillとauto\-fitの使い分けでRWDが捗る – WPJ](https://www.webprofessional.jp/difference-between-auto-fill-and-auto-fit/)
[2021年版、CSS Gridでどのように配置されるかをまとめたチートシート](https://coliss.com/articles/build-websites/operation/css/css-grid-cheat-sheets.html)
[gridレイアウトについて調べました【CSS/grid\-template/auto\-fit/auto\-fill】 \| えむ家のメモ帳](https://m-kenomemo.com/grid-template/#toc14)