【CSS】Gridレイアウトを使いこなすエンジニアはかっこいい！

## 概要
この記事は、Gridレイアウトの基本的な書き方をもとに、
Gridレイアウトを使う時に知らないといけないCSSプロパティについてを解説します。

Gridレイアウトのショートハンド（一括指定）ができるようなCSSについての解説はしていません。
あくまで【入門】になるので、わかりやすい・理解しやすいように 使うプロパティはわかりやすくしています。

この記事を読んで、Gridレイアウトについて理解を深めていただけると嬉しいです。


## Gridレイアウトの基本的な書き方
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/9e740f43-e7d0-cfaf-65ad-60a9314cd1ca.png)
まずはGridレイアウトの基本的な書き方をマスターしましょう。
Gridコンテナーと呼ばれる親要素の中に、Gridアイテムと呼ばれる子要素を入れてHTMLは完了です。

### STEP①. 親要素をグリッドコンテナとして指定する
以下のようにHTML・CSSを記載すると、子要素が縦に並んでいる状態になります。
auto行x1列のグリットを指定していることになります。

**HTML**
```HTML
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>
```

**CSS**
```css
.container {
  display: grid;
}
```
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/98cf49a5-7f96-d245-24fd-3dbdfc4a082d.png)


### STEP②. グリットの行と列の数、サイズを指定する
行と列の数が**決まっている** のか **決まっていない**のかでグリットの指定方法が変わります

決まっている場合 → 明示的グリット
決まっていない場合 → 暗黙的グリット

でグリットの行と列の数、サイズを指定します。

#### 行と列の数が決まっている時の指定方法（明示的グリット）
##### `grid-template-rows` : 行のセル数とセルの高さを親要素に指定する
grid-template-rowsの場合は、行のセル数とセルのheightを同時に指定することになります。
以下のように**Gridコンテナー**（親要素）に指定することで、1行の高さ300pxの3行のGridを指定することができます。
![スクリーンショット 2022-04-01 1.03.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/0df3e8e1-4155-cce4-4a97-188b787935de.png)

##### `grid-template-columns` : 列のセル数とセルの幅を親要素に指定する
grid-template-columnsの場合は、列のセル数とセルのwidthを同時に指定することになります。
以下のように**Gridコンテナー**（親要素）に指定することで、1列の幅300pxの3列のGridを指定することができます。
![スクリーンショット 2022-04-01 1.02.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/8de438fc-d0c0-0598-be32-13544d915be8.png)


#### 列と行の数が決まっていない時の指定方法（暗黙的グリット）
以下のような時に、暗黙的グリットが適応され、自動配置されます。

+ Gridコンテナーに`grid-template-rows` `grid-template-columns`が指定していない
+ `grid-template-rows/columns`で定義したセル数よりも、Gridアイテムが多い

##### `grid-auto-rows` : 自動で作成されるセルの高さを親要素に指定する
2x2のGridレイアウトを定義して、Gridアイテムが6つあった時に、
はみ出た分Gridアイテムを入れるセルの高さを指定することができます。

```css
.container {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 20px 20px;
  grid-auto-rows: 40px;
}
```
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/719ecc05-a6d5-9aaf-727e-b3672a840184.png)

##### `grid-auto-columns` : 自動で作成されるセルの幅を親要素に指定する
2x2のGridレイアウトを定義して、Gridアイテムが6つあった時に、
はみ出た分Gridアイテムを入れるセルのwidthを指定することができます。
```css
.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 40px 40px;
  grid-auto-columns: 200px;
  
  grid-auto-flow: column; /* 便利上Gridアイテムをセルに配置する順番を左上から下にしている */

 }
```
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/08ac3d1a-0655-36d0-e330-1d7caed2809c.png)


### STEP③. Gridアイテムをセルに配置する 
セルにGridアイテムを配置する方法はいくつかあります。

a. GridアイテムをHTMLの上から順番にセルに配置される（デフォルト）
b. セルに名前をつけて、名前が一致する範囲に配置する
c. 子要素にライン番号を指定して配置する

上記のa~cの配置方法を使って、Gridアイテムをセルに配置していきます。

#### a. GridアイテムをHTMLの上から順番にセルに配置される
何も指定しなくても、１つのGridアイテムを1つのセルに配置してくれます。
2つ以上のセルを跨いで、１つのGridアイテム配置する場合は、b、cの方法を使いましょう。

#### b. セルに名前をつけて、名前が一致する範囲に配置する
##### `grid-template-areas` : 各セルに名前をつける
下記のように**Gridコンテナー**（親要素）に、指定することで各セルに名前を設定することができます。
複数のセルに同じ名前を設定することで、複数のセルを跨いで、１つのGridアイテム配置することができます。
```css
.container {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 20px 20px;
  grid-template-areas: "item1 item1"
                       "item2 item3";
}
```

##### `grid-area` : Gridアイテムをセルに配置する
下記のように**Gridアイテム**（子要素）に、指定することで同じ名前のセルに配置することができます。
同じセルに複数のGridアイテムを配置したい場合は、各**Gridアイテム**（子要素毎）に同じ名前を指定することでできます。
```css
.item {
  grid-area: item1;
}
```


#### c. 子要素にライン番号を指定して配置する
Gridレイアウトでは、各グリッド線に ライン番号が決められており、このライン番号を使うことで、子要素を任意の位置に配置します。
以下の図は、3x2のGridレイアウトのライン番号になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/f238b144-4fec-725f-fab0-d41942e880ef.png)

##### `grid-row` : 行のライン番号を指定して配置する
下記のようにgrid-rowを**Gridアイテム**（子要素）に、指定することで子要素を任意の位置に配置します

```css
.item {
  grid-row: 1 / 3;
  /* grid-row: 初めのライン番号 / 終わりのライン番号 */
}
```

##### `grid-column` : 列のライン番号を指定して配置する
下記のようにgrid-columnを**Gridアイテム**（子要素）に、指定することで子要素を任意の位置に配置します

```css
.item {
  grid-column: 2 / 3;
  /* grid-colum: 初めのライン番号 / 終わりのライン番号 */
}
```

## まとめ
この記事は、Gridレイアウトの基本的な書き方をもとに、Gridレイアウトを使う時に知らないといけないCSSプロパティについて解説しました。

この記事を読んで、Gridレイアウトについて理解を深めていただけたなら嬉しいです。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510