gridレイアウトについて

## gridレイアウトについて
普段使うことも多いgridレイアウトですが、その都度調べながら使っているな〜と感じたのでまとめてみます。

### MDN Web Docによると
> グリットとは、行と列を定義する垂直線と水平線が交差したものです。要素をグリッドの行と列の中に配置することができます。

定義だけ見てもよく分かりませんでした。
実際に使ってみます。

`div`要素の中に`div`を５つ生成。

```haml:index.html
<div class="wrapper">
    <div class="childlen">1</div>
    <div class="childlen">2</div>
    <div class="childlen">3</div>
    <div class="childlen">4</div>
    <div class="childlen">5</div>
    <div class="childlen">6</div>
</div>
```
```css:style.css
.childlen {
  background-color: #b7ecff;
  border: 1px solid #fff;
  width: 100%;
  height: 100px;
}
```
↓表示は下記の通り。何も指定していないので要素が縦に並びます。

![スクリーンショット 2023-02-21 0.05.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2580144/1a4006da-f22f-9129-a0d4-2a594b9e2b5f.png)

親要素に`display:grid;`を適用してみます。
```css:style.css
.childlen {
  background-color: #b7ecff;
  border: 1px solid #fff;
  width: 100px;
  height: 100px;
}
.wrapper {
  display: grid;
}
```
![スクリーンショット 2023-02-21 0.05.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2580144/1a4006da-f22f-9129-a0d4-2a594b9e2b5f.png)

何も変わっていない・・・？
![スクリーンショット 2023-02-21 0.06.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2580144/50d112cc-1a8c-a64a-bc3f-6ea5e912a69f.png)

ディベロッパーツールでみると、行が出来ていることが確認できます。
ただ、`display: grid;`の指定だけでは見た目にレイアウトに変化はありません。

 ## grid-template-columnsの指定
grid-template-columnsを指定することにより、列の指定ができます。

```css:style.css
.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px; /* 追加 */
}
```
grid-template-columnsを指定することで列が作成されました。
100pxの列を３つ作成されています。
![スクリーンショット 2023-02-21 0.07.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2580144/1e027b91-cf0d-b835-3c8b-270b3d76d98c.png)

```css:style.css
.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px; /* 追加 */
}
```
指定を増やすことで列が増えていきます。
![スクリーンショット 2023-02-21 0.10.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2580144/79da6aa4-9487-36a8-5f05-94efa8080b8c.png)


grid-template-columnsを指定することで列が作成できることが分かりました。
列の幅は固定ではなく画面サイズに合わせて変更したい時に使うのが`fr` です。

```css:style.css
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
```
`fr`指定をすることで、画面の横幅の1/3の幅の列を作成することができました。
`fr`とはfraction(比率)の略です。`1fr 1fr 1fr`とは1:1:1の比率での指定を意味します。

![スクリーンショット 2023-02-21 0.13.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2580144/c51121e9-ce3f-be79-22a5-8c97a9c89d4a.png)

↓`grid-template-columns: 2fr 1fr 1fr;`
![スクリーンショット 2023-02-21 0.17.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2580144/e0c05b40-3741-7583-3f6d-e8cc5bbc0e00.png)

また、pxの固定値と比率を組み合わせて使うこともできます。
```css:style.css
.wrapper {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
}
```
一番左の列が200px固定になりました。残りの横幅が１対１になっていることが分かります。
![スクリーンショット 2023-02-21 0.20.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2580144/772390ee-60c3-760e-d872-00e04f156c17.png)

repeatとの組み合わせ
先ほどの`grid-template-columns: 1fr 1fr 1fr;`は下記のように書き換えることができます。
```css:style.css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
```
![スクリーンショット 2023-02-21 0.23.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2580144/f24bba1f-5a82-f80f-5950-436552c5a1f2.png)

`repeat(繰り返し回数, 比率)`のように記述することで、
スッキリと記述することができます。

また、固定値と組み合わせて下記のように使用もできます。
```css:style.css
.wrapper {
  display: grid;
  grid-template-columns: 200px repeat(4, 1fr) 400px;
}
```
![スクリーンショット 2023-02-21 0.27.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2580144/57786a51-0909-3f1f-7664-ff54d42e5d83.png)

1番目の要素が200x、６番目の要素が400px、２番目から５番目の要素が均等幅になりました。

## grid-template-rowsの指定
列の指定の次は行の指定です。

```css:style.css
.childlen {
  background-color: #b7ecff;
  border: 1px solid #fff;
  width: 100%;
  height: 100%; /* 高さを100%に変更 */
}
.wrapper {
  display: grid;
  grid-template-rows: 100px 100px 100px; /* 変更 */
}
```
![スクリーンショット 2023-02-21 0.38.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2580144/8d6620d3-ab91-3a2e-2d3a-c13d044d3c58.png)

1~3番目の要素は100pxになり、100pxの行が３つ作成されていることが分かります。

こちらも、`repeat()`が使用できます。
```css:style.css
.childlen {
  background-color: #b7ecff;
  border: 1px solid #fff;
  width: 100%;
  height: 100%; /* 高さを100%に変更 */
}
.wrapper {
  display: grid;
  grid-template-rows: repeat(3, 100px);
}
```

比率指定をしてみます。
```css:style.css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
```
![スクリーンショット 2023-02-21 23.31.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2580144/729b3b1f-736d-61e9-f8df-5c8482442410.png)

均等な行が作成されましたが、高さ指定をしていないのでコンテンツの内容物の高さになっています。

高さを一括指定する場合に使用できるのが`grid-auto-rows`です。
```css:style.css
.wrapper {
  display: grid;
  grid-auto-rows: 80px;
}
```
![スクリーンショット 2023-02-21 23.37.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2580144/2936ee09-2dcd-b0e6-7852-79608e1e43ef.png)
各要素が80pxになりました。

## grid-template-rowsとgrid-template-columnsの組み合わせ

`grid-template-rows`と`grid-template-columns`を指定することで２×３の表が簡単に作成できます。

```css:style.css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
}
```
![スクリーンショット 2023-02-21 23.40.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2580144/541ed017-6129-8284-d5d7-099aeab9a5e1.png)

## 最後に
ここまでgridレイアウトの基本を見てきました。
次回は要素の配置について書いていこうと思います。