【CSS Grid 基本編】grid-template-columns/rows、gapについて

# CSS Grid とは

* displayプロパティの値
* Flexboxのように横並びに使える
* Flexboxは直線的に1行ずつ並ぶが、Gridは多次元に列と行に並べられる。

```html:HTML
<div class="wrapper">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
```
```scss:SCSS
.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/244f80c4-c412-1a29-4dd7-a4b66ac7dc80.png)

# grid-template-columns/rows
基本的に指定方法は同じで、縦列の幅か横列の高さの指定の違い
※混乱したのでgrid-template-columnsのみで説明します
## grid-template-columns
* `縦列の幅`を指定する

## grid-template-rows
* `横行の高さ`を指定する


## `fr`指定
```SCSS:grid-template-columns
grid-template-columns: 2fr 1fr;
```
* 比率での指定
* `2fr 1fr`は2:1で列を指定すること
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/244f80c4-c412-1a29-4dd7-a4b66ac7dc80.png)

## `px`指定

```SCSS:grid-template-columns
  grid-template-columns: 200px 400px 400px;
```
* サイズ固定幅の指定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/0b4badba-fa5c-eaf7-a886-3de0aa63f512.png)

## `%`指定

```SCSS:grid-template-columns
  grid-template-columns: 50% 20% 30%;
```
* 全体の幅を100%としての指定
* 比率`fr`のほうが楽
* 100%超えると普通にはみ出す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/e7fb01a6-ac91-91fa-2b56-87599612c25f.png)

## `auto`指定

```SCSS:grid-template-columns
  grid-template-columns: auto auto auto;
```
* 横幅いっぱいから指定した数同じ幅で分割される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/86250af6-ae0e-9b80-a751-096a6f9c7e72.png)

### `fr`や`％`と組み合わせたとき、`auto`の動きが変わる
```SCSS:grid-template-columns
  grid-template-columns: 50% 1fr 2fr auto;
```
* 他の列幅が自動伸縮で幅がうまるときは子要素自身のサイズになる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/ee9dbfb4-dbbd-9131-9bbb-664a82fa4ea0.png)

### `px`が入ると残りの幅全てになる
```SCSS:grid-template-columns
    grid-template-columns: 200px 50% 1fr 2fr auto;
```
* `fr`が伸びて`auto`が子要素自身のサイズになってもいいのになんでだろう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/2ab22215-c6df-1b6c-8f3a-f723b8c1efe3.png)

## repeat()記法
```SCSS:grid-template-columns
// repat({繰り返す数}, {繰り返す数値})
grid-template-columns: repeat(4,1fr);
grid-template-columns: repeat(4, 1fr 4fr);
```
* 第1引数に{繰り返す数}、第２引数に{繰り返す数値}を入れる
* 第２引数に{繰り返す数値}を複数入れても動く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/55145d5b-7391-0335-fd59-d83bdacc319e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/677768ac-9e6a-41b3-a4bb-6240109e8ecc.png)

## grid-template-rowsは最後の指定が繰り返される
```SCSS:grid-template-columns
grid-template-columns: 2fr 1fr;
grid-template-rows: 2fr 1fr;
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/c63ac842-ee32-e003-5a97-8f4e749949b0.png)

# grid-gapの余白指定
```SCSS:grid-gap
grid-gap: 1em 2em; // まとめて書くとき　{横} {縦}
grid-row-gap: 1em; //横行同士の余白
grid-columns-gap: 2em; //縦列同士の余白
```
* ちなみにflexboxでも使える
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/71aac545-bc3c-4036-9920-2662e7b95ca5.png)

# codepen
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="QWmWQJy" 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/QWmWQJy">
  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>

# 次回はgrid-autoなどについて解説

# 参考サイト
[グリッドレイアウトの基本概念 \- CSS: カスケーディングスタイルシート \| MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
[FlexboxとCSS Gridの使い分け方、よく見かけるUIコンポーネントをFlexboxとGridで実装するテクニックのまとめ \| コリス](https://coliss.com/articles/build-websites/operation/css/grid-for-layout-flexbox-for-components.html)
[5分で完璧に分かる！CSS Gridの基本的な使い方を解説 \| コリス](https://coliss.com/articles/build-websites/operation/css/learn-css-grid-in-5-minutes.html)