CSS Grid Layout を極める！（場面別編）

# 0. はじめに

この記事では、CSS Grid Layoutの基本は知っているという前提で、いろいろな場面を想定して更なる使い方を書いていきたいと思います。

この記事は4部構成の中の **場面別編** です。
[CSS Grid Layout を極める！（基礎編）][1]
**[CSS Grid Layout を極める！（場面別編）][2]** ←これ
<font color="#ccc">作成中：CSS Grid Layout を極める！（アルゴリズム編）</font>
<font color="#ccc">作成中：CSS Grid Layout を極める！（番外編）</font>

# トラックの大きさを柔軟に指定したい (grid-template-rows / grid-template-columns)

トラックの幅・高さの指定は `grid-template-rows` / `grid-template-columns` で行いました。
基礎編では `px` を主に使いましたが、他にも様々なものが使えます。そして、以下で挙げる値は自由に組み合わせて使うことが出来ます。

```css
#container {
	grid-template-columns: 100px 50% max-content 1fr auto minmax(100px, 500px);
}
```

※尚、このセクションの内容は非常に奥が深いので、アルゴリズム編（作成中）で別途詳しく書いていきたいと思います。

- 長さ, %

px, %, em, vh, vw などの単位はもちろん、mm, cm, in, pt, pc, ch, rem, vmin, vmax など、`width`に使えるような長さの単位が大体使えます。
これらを`calc()`関数の中で組み合わせて使うことも出来ます。

- max-content, min-content

そのトラック内のすべてのアイテムの max-content あるいは min-content の値を算出し、その最大値を採用します。
max-content, max-content は他のCSSプロパティにも用いることができますので、詳細の説明は割愛します。
参考：[Qiita: CSS での横幅 (width) 、高さ (height) の指定にキーワード値を使う](http://qiita.com/qed/items/ef5688118ce78985c9ab)

- auto

そのトラックのアイテムの内容や、他のトラックとの兼ね合いで、適切な大きさになります。

- fit-content(長さ)

autoに近いですが、"長さ"の指定が若干作用します。

- minmax(min, max)

トラックの最小幅および最大幅を指定できます。min および max には上に挙げてきた値を入れることが出来ます。

```css:minmaxのサンプル
#container {
	display: grid;
	grid-template-columns: 100px minmax(600px, 800px);
}
```

- fr

すべての他のトラックの大きさが決定してもまだなおコンテナに余裕がある場合に、frを指定しているトラックがその比率で残りのスペースを占有します。

```css:frのサンプル
#container {
	display: grid;
	grid-template-columns: 100px 1fr 2fr;
}
```

![fr.png](https://qiita-image-store.s3.amazonaws.com/0/87822/333c0d8a-e3d3-ef0e-e60d-d737cd35ae02.png)

frを指定しているトラックが1つだけならば、そのトラックが残りのスペースをすべて占有することになります。

```css:frのサンプル
#container {
	display: grid;
	grid-template-columns: 200px 1fr;
}
```

![fr2.png](https://qiita-image-store.s3.amazonaws.com/0/87822/606a5151-6785-b52d-5195-5747cd70bdb7.png)

# アイテムを自動的に配置したい

[基礎編][1]では、[ラインの番号で指定したり](http://qiita.com/kura07/items/e633b35e33e43240d363#%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%EF%BC%93---%E6%96%B9%E6%B3%95%EF%BC%A1-%E3%83%A9%E3%82%A4%E3%83%B3%E3%81%AE%E7%95%AA%E5%8F%B7%E3%81%A7%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B)、[エリアに名前を付けて指定したり](http://qiita.com/kura07/items/e633b35e33e43240d363#%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%EF%BC%93---%E6%96%B9%E6%B3%95%EF%BC%A2-%E3%82%A8%E3%83%AA%E3%82%A2%E3%81%AB%E5%90%8D%E5%89%8D%E3%82%92%E4%BB%98%E3%81%91%E3%81%A6%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B)して、アイテムを配置していきました。
確かにこれらの方法でもアイテムは配置できますが、すべてのアイテムにCSSで位置を指定するのは面倒ですよね。
このセクションでは、そういったアイテムの配置のCSSを省略して書ける（かもしれない）ということを説明します。

※尚、このセクションの内容は非常に奥が深いので、アルゴリズム編（作成中）で別途詳しく書いていきたいと思います。

## 自動的に配置

アイテムに `grid-row` / `grid-column` / `grid-area` を特に指定しなかった場合には、左上から順にアイテムが埋まっていきます。

```html:例：自動的に配置1
<div id="container">
	<div>A</div>
	<div>B</div>
	<div>C</div>
	<div>D</div>
	<div>E</div>
	<div>F</div>
</div>
```

```css:例：自動的に配置1
#container {
	display: grid;
	grid-template-rows: 200px 100px;
	grid-template-columns: 200px 100px 100px;
}
```

![自動的に配置.png](https://qiita-image-store.s3.amazonaws.com/0/87822/096b50c1-2052-339f-9307-f6c31dab7709.png)

## 自動的に配置する方向を列方向にする (grid-auto-flow)

上の例のように、普通は行方向から順にアイテムが埋まりますが、これはコンテナの `grid-auto-flow`プロパティの初期値が `row` だからです。
コンテナに `grid-auto-flow: column;` を指定することで列方向から順にアイテムが埋まります。

```css:例：自動的に配置2
#container {
	display: grid;
	grid-template-rows: 200px 100px;
	grid-template-columns: 200px 100px 100px;
	grid-auto-flow: column;
}
```

![自動的に配置2.png](https://qiita-image-store.s3.amazonaws.com/0/87822/27b7cb57-2814-461c-a206-89484d553436.png)

## 拡張したトラックの大きさを指定する (grid-auto-rows / grid-auto-columns)

グリッドのトラックの大きさの指定は `grid-template-rows` / `grid-template-columns` で定義出来ますが、場合によってはアイテムがこれらのプロパティで指定したよりも外側に来ることがあります。

- アイテムに `grid-row` / `grid-column` を指定して、わざと外側のエリアを指定した場合
- アイテムに `grid-row` / `grid-column` を指定しないが、アイテム多すぎてが定義したグリッドよりもはみ出る場合
- そもそもコンテナに `grid-template-rows` / `grid-template-columns` を指定していない場合

その場合のトラックの大きさを指定するプロパティが、`grid-auto-rows` / `grid-auto-columns` です。コンテナに指定します。

- **grid-auto-rows**: はみ出たアイテムの行トラックの大きさを指定する
- **grid-auto-columns**: はみ出たアイテムの列トラックの大きさを指定する

例：`grid-auto-rows: 50px;` はみ出たアイテムの縦の高さを50pxにする。

また、半角スペースで区切って指定すると、指定した大きさを繰り返します。
例：`grid-auto-rows: 50px 100px;` はみ出たアイテムの縦の高さを 50px -> 100px -> 50px -> 100px ...と繰り返す。

トラックの大きさの指定には、[先程のセクション](http://qiita.com/kura07/items/486c19045aab8090d6d9#%E3%83%88%E3%83%A9%E3%83%83%E3%82%AF%E3%81%AE%E5%A4%A7%E3%81%8D%E3%81%95%E3%82%92%E6%9F%94%E8%BB%9F%E3%81%AB%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%9F%E3%81%84-grid-template-rows--grid-template-columns)に挙げたものが使えます。

```html:例：拡張したトラックの大きさを指定する
<div id="container">
	<div>A</div>
	<div>B</div>
	<div>C</div>
	<div>D</div>
	<div>E</div>
	<div>F</div>
	<div>G</div> <!-- Gは特にアイテムの位置を指定していないが、アイテムの数が多いのではみ出る -->
	<div id="itemH">H</div> <!-- Hはアイテムの位置を grid-template-rows/columns の外に指定している -->
</div>
```

```css:例：拡張したトラックの大きさを指定する
#container {
	display: grid;
	grid-template-rows: 100px 100px;
	grid-template-columns: 100px 100px 100px;
	grid-auto-rows: 30px 50px;
}
#itemH {
	grid-row: 4; grid-column: 2;
}
```

![拡張したトラックの大きさを指定する.png](https://qiita-image-store.s3.amazonaws.com/0/87822/3f5f04a9-3eec-110b-bb68-a8df36dfce66.png)

コンテナに `grid-template-rows` / `grid-template-columns` を指定していない場合は、全てのグリッドが `grid-auto-rows` / `grid-auto-columns` の大きさになります。

```html:例：grid-template-rowsを指定せずgrid-auto-rowsのみを指定する
<div id="container">
	<div>A</div>
	<div>B</div>
	<div>C</div>
	<div>D</div>
	<div>E</div>
	<div>F</div>
	<div>G</div>
</div>
```

```css:例：grid-template-rowsを指定せずgrid-auto-rowsのみを指定する
#container {
	display: grid;
	grid-auto-rows: 70px;
	grid-template-columns: 100px 100px 100px 100px;
}
```

![grid-template-rowsを指定せずgrid-auto-rowsのみを指定する.png](https://qiita-image-store.s3.amazonaws.com/0/87822/c9295b78-5045-de66-e831-a3b5247ba077.png)

## 自動的に配置（span使用）

`grid-row` / `grid-column` でラインの番号を指定する代わりに、隣接するセルをいくつ跨いで占有するかだけを指定することが出来ます。
`grid-row: span ○○;` のように指定します。

```css
#item {
	/* 行方向に2セル、列方向に3セルを占有する。どこに配置するかは自動的に決まる。 */
	grid-row: span 2;
	grid-column: span 3;
}
```

この場合も、左上から順にアイテムが埋まっていきます。

```html:例：自動的に配置（span使用）
<div id="container">
	<div>A</div>
	<div id="itemB">B</div>
	<div>C</div>
	<div>D</div>
	<div>E</div>
</div>
```

```css:例：自動的に配置（span使用）
#container {
	display: grid;
	grid-template-rows: 200px 100px;
	grid-template-columns: 200px 100px 100px;
}
#itemB {
	grid-row: span 2;
}
```

![自動的に配置（span使用）.png](https://qiita-image-store.s3.amazonaws.com/0/87822/e527b259-8179-1dd4-3d95-7117988b116d.png)

## 固定の配置と自動的な配置を混ぜる

`grid-row` / `grid-column` / `grid-area` を使った固定の配置と、自動的な配置を混ぜることもできます。
その場合、固定配置のアイテムが先に配置され、その後に左上から空いたスペースに自動的な配置のアイテムが配置されていきます。

```html:例：固定の配置と自動的な配置を混ぜる
<div id="container">
	<div>A</div>
	<div id="itemB">B<br>(固定)</div>
	<div>C</div>
	<div id="itemD">D<br>(固定)</div>
	<div>E</div>
	<div>F</div>
</div>
```

```css:例：固定の配置と自動的な配置を混ぜる
#container {
	display: grid;
	grid-template-rows: 200px 100px;
	grid-template-columns: 200px 100px 100px;
}
#itemB {
	grid-row: 1; grid-column: 1;
}
#itemD {
	grid-row: 2; grid-column: 2;
}
```

![固定の配置と自動的な配置を混ぜる.png](https://qiita-image-store.s3.amazonaws.com/0/87822/fbd614a8-b755-2134-f8db-40afba7f94ea.png)

## denseでなるべく敷き詰める (grid-auto-flow)

自動的な配置の方法は左上から順にアイテムが埋まっていきますが、左上から順番であるがゆえに、場合によってはスペースが空いてしまう場合があります。

```html:例：自動的な配置でスペースが空くことがある
<div id="container">
	<div>A</div>
	<div id="itemB">B</div>
	<div id="itemC">C</div>
	<div>D</div>
	<div>E</div>
</div>
```

```css:例：自動的な配置でスペースが空くことがある
#container {
	display: grid;
	grid-template-rows: 100px 100px 100px 100px;
	grid-template-columns: 100px 100px 100px;
}
#itemB {
	grid-row: span 2; grid-column: span 2;
}
#itemC {
	grid-row: span 2; grid-column: span 2;
}
```

![自動的な配置でスペースが空く.png](https://qiita-image-store.s3.amazonaws.com/0/87822/ba6fbe37-b1c1-5098-af7e-43fc056ffb13.png)

そこで `grid-auto-flow: dense;` を指定することで、開いているスペースをなるべく埋めるという指定にすることが出来ます。


```html:例：denseでスペースを埋める
<div id="container">
	<div>A</div>
	<div id="itemB">B</div>
	<div id="itemC">C</div>
	<div>D</div>
	<div>E</div>
	<div>F</div>
</div>
```

```css:例：denseでスペースを埋める
#container {
	display: grid;
	grid-template-rows: 100px 100px 100px 100px;
	grid-template-columns: 100px 100px 100px;
	grid-auto-flow: dense;
}
#itemB {
	grid-row: span 2; grid-column: span 2;
}
#itemC {
	grid-row: span 2; grid-column: span 2;
}
```

![denseでスペースを埋める.png](https://qiita-image-store.s3.amazonaws.com/0/87822/b6e40d94-33dc-d816-0802-ffbf1a00b1c1.png)

尚、[自動的に配置する方向を列方向にする][grid-auto-flow]にもあるように、`grid-auto-flow` は、自動的な配置の方向を変える役目もあります。
同時に指定したい場合は `grid-auto-flow: column dense;` のように記述します。

## 自動的な配置の順番を変える (order)

自動的な配置は、通常 HTML順に左上から配置されていきますが、`order`プロパティを使うことでその順番を変更できます。

```html:例：orderで順番を変える
<div id="container">
	<div id="itemA">A</div>
	<div id="itemB">B</div>
	<div id="itemC">C</div>
	<div id="itemD">D</div>
	<div id="itemE">E</div>
	<div id="itemF">F</div>
</div>
```

```css:例：orderで順番を変える
#container {
	display: grid;
	grid-template-rows: 100px 100px;
	grid-template-columns: 100px 100px 100px;
}
#itemA { order: 4; }
#itemB { order: 2; }
#itemC { order: 1; }
#itemD { order: 3; }
#itemE { order: 6; }
#itemF { order: 5; }
```

![orderで順番を変える.png](https://qiita-image-store.s3.amazonaws.com/0/87822/e99d387a-4f7f-ccc4-55ee-04d07cef45d4.png)

# トラックの大きさの指定を繰り返したい

## 固定回数繰り返す (repeat(n, ...))

トラックの幅の指定は `grid-template-rows` / `grid-template-columns` で行いますが、トラックの数が多くなると書くのが面倒になりますね。

```css:面倒…
#container {
	display: grid;
	grid-template-rows: 100px 50px 100px 50px 100px;
	grid-template-columns: 100px 100px 100px 100px 100px;
}
```

繰り返しの部分は `repeat(繰り返す回数, トラックの幅)` というふうにかけます。

```css:短くなった！
#container {
	display: grid;
	grid-template-rows: repeat(2, 100px 50px) 100px;
	grid-template-columns: repeat(5, 100px);
}
```

## コンテナの大きさに合わせて繰り返す (repeat(auto-fill | auto-fit, ...))

例えば、「100px のトラックを、横に詰めれるだけ詰めたい！」ということもありますね。
こういう場合は `repeat(auto-fill | auto-fit, トラックの幅)` を使います。

```html:例：コンテナの大きさに合わせて繰り返す
<div id="container">
	<div>A</div>
	<div>B</div>
	<div>C</div>
	<div>D</div>
	<div>E</div>
	<div>F</div>
	<div>G</div>
</div>
```

```css:例：コンテナの大きさに合わせて繰り返す
#container {
	display: grid;
	grid-auto-rows: 100px;
	grid-template-columns: repeat(auto-fill, 100px);
}
```

![コンテナの大きさに合わせて繰り返す.gif](https://qiita-image-store.s3.amazonaws.com/0/87822/de538c20-c9c1-683e-4ffb-be0a5b022ccb.gif)

`auto-fill` と `auto-fit` は非常に似ていますが、1つだけ違う点があります。

- `auto-fit` では、アイテムが配置されなかったトラックは無くなります。

これは、後述する `justify-content` などを用いたときに特に分かりやすいです。
`justify-content: center;` とするとグリッド全体が真ん中に寄るのですが、auto-fillだとうまく中央に寄らないことがあります。

```css:auto-fillだと中央に寄らない…
#container {
	display: grid;
	grid-auto-rows: 100px;
	grid-template-columns: repeat(auto-fill, 100px);
	justify-content: center; /* グリッド全体を中央に寄せる設定 */
}
```

![auto-fillだと中央に寄らない….png](https://qiita-image-store.s3.amazonaws.com/0/87822/a9a8da44-a332-f3e8-a136-f369605c940f.png)

これは、`auto-fill` だとアイテムが配置されないトラックの幅も確保してしまうためです。

![auto-fillだと中央に寄らない…2.png](https://qiita-image-store.s3.amazonaws.com/0/87822/07b1a082-0026-d931-b61d-3cc50a940406.png)

`auto-fit` を用いると、アイテムが配置されなかったトラックは無くなるので、ちゃんと中央に寄ります。

```css:auto-fitだと中央に寄る！
#container {
	display: grid;
	grid-auto-rows: 100px;
	grid-template-columns: repeat(auto-fit, 100px);
	justify-content: center; /* グリッド全体を中央に寄せる設定 */
}
```

![auto-fitだと中央に寄る！.png](https://qiita-image-store.s3.amazonaws.com/0/87822/b0ae4f8f-a7a7-5129-6d98-205245a9e53a.png)

# グリッドやアイテムの位置をいろいろ指定したい

## グリッドの位置を指定する (justify-content / align-content)

デフォルトでは、コンテナ内のグリッドは左上に寄っています。

```css:左上に寄っている
#container {
	display: grid;
	width: 500px;
	height: 300px;
	grid-template-rows: 100px 100px;
	grid-template-columns: 100px 100px 100px;
}
```

![左上に寄っている.png](https://qiita-image-store.s3.amazonaws.com/0/87822/921312cf-793c-dcb1-554d-ecd2ec7410e4.png)

`justify-content` / `align-content` を指定すると、コンテナ内のグリッドの位置を調整できます。コンテナのスタイルとして記述します。

- **justify-content**: グリッドの**横方向**の位置を指定する
- **align-content**: グリッドの**縦方向**の位置を指定する

指定できる値は、`start` / `center` / `end` などがあります。

```css:例：グリッドを下端の中央に寄せる
#container {
	display: grid;
	width: 500px;
	height: 300px;
	grid-template-rows: 100px 100px;
	grid-template-columns: 100px 100px 100px;
	justify-content: center; /* 横方向は中央に */
	align-content: end; /* 縦方向は下端に */
}
```

![グリッドを下端の中央に寄せる.png](https://qiita-image-store.s3.amazonaws.com/0/87822/bdbd2ffa-c694-539c-c4fd-7a612ccbc2b1.png)

## セル同士に隙間をあける(1) (grid-row-gap / grid-column-gap)

デフォルトだとセル同士は隙間なく隣接しますが、`grid-row-gap` / `grid-column-gap` を指定するとセル同士の間に隙間を開けることが出来ます。コンテナのスタイルとして記述します。

```css:例：セル同士に隙間をあける(1)
#container {
	display: grid;
	grid-template-rows: 100px 100px;
	grid-template-columns: 100px 100px 100px;
	grid-row-gap: 10px;
	grid-column-gap: 30px;
}
```

![セル同士に隙間をあける(1).png](https://qiita-image-store.s3.amazonaws.com/0/87822/45a026f8-603b-0a33-fa59-bec1aec44569.png)

## セル同士に隙間をあける(2) (justify-content / align-content)

`justify-content` / `align-content` を使ってセル同士に隙間をあけることも出来ます。

- `space-between`: セル同士の間は等間隔になりますが、両端は隙間がありません。
![space-between.png](https://qiita-image-store.s3.amazonaws.com/0/87822/83597657-2ace-723b-2fd9-d849cc9c9c8b.png)

- `space-around`: 〃、両端の隙間はその半分になります。
![space-around.png](https://qiita-image-store.s3.amazonaws.com/0/87822/eaf83b99-e999-fc31-f098-a96c5fa54111.png)

- `space-evenly`: 〃、両端の隙間も同じだけあきます。
![space-evenly.png](https://qiita-image-store.s3.amazonaws.com/0/87822/16a237d9-516e-31f1-cee7-a0c2ac1f8da1.png)


## アイテムの位置を一気に指定する (justify-items / align-items)

デフォルトでは、アイテムはエリア内をすべて占めるように配置されます。(`auto`)

![アイテムの位置はデフォルトでauto.png](https://qiita-image-store.s3.amazonaws.com/0/87822/c74aac70-55c4-11e0-cd02-b68da21dd281.png)

全てのアイテムをセル内のどこかに寄せたい場合は、`justify-items` / `align-items` を使います。コンテナのスタイルとして記述します。

- **justify-items**: 全てのアイテムの**横方向**の位置を指定する
- **align-items**: 全てのアイテムの**縦方向**の位置を指定する

```css:例：全てのアイテムの位置をエリアの中央下端に寄せる
#container {
	display: grid;
	grid-template-rows: 100px 100px;
	grid-template-columns: 100px 100px 100px;
	justify-items: center;
	align-items: end;
}
```

![全てのアイテムの位置をエリアの中央下端に寄せる.png](https://qiita-image-store.s3.amazonaws.com/0/87822/d386ebc7-740a-d078-0a8f-922f1039b83f.png)

## アイテムの位置を個別に指定する (justify-self / align-self)

全てのアイテムの位置を指定するのではなく、個別で指定することも出来ます。
`justify-self` / `align-self` を使います。アイテムのスタイルとして記述します。

- **justify-self**: アイテムの**横方向**の位置を指定する
- **align-self**: アイテムの**縦方向**の位置を指定する

```css:例：itemAの位置だけをエリアの中央下端に寄せる
#itemA {
	justify-self: center;
	align-self: end;
}
```

![itemAの位置だけをエリアの中央下端に寄せる.png](https://qiita-image-store.s3.amazonaws.com/0/87822/b674b07b-de35-265c-1cbf-e4b8c9836b85.png)

## 【チートシート】グリッドやアイテムの位置の調整

![【チートシート】グリッドやアイテムの位置の調整.png](https://qiita-image-store.s3.amazonaws.com/0/87822/8986ac9a-1301-c7be-3b76-ff9c1fe4631f.png)

※`justify-items` / `align-items` は、コンテナに指定して全てのアイテムの位置を指定する

## アイテムの位置を数値で指定する (margin)

単純に `margin` を用いることで、エリアの4辺からの距離を指定することが出来ます。

```css:例：itemAの位置をmarginで指定する
#itemA {
	margin: 10px 20px 30px 10px;
}
```

![itemAの位置をmarginで指定する.png](https://qiita-image-store.s3.amazonaws.com/0/87822/10a28f2c-aab1-d2f1-d685-5ffe080128f1.png)

また、負のマージンを指定することで、アイテム同士を重ねることも出来ます。

```css:例：itemAに負のマージンを指定する
#itemA {
	margin: 10px -20px -30px 10px;
}
```

![itemAに負のマージンを指定する.png](https://qiita-image-store.s3.amazonaws.com/0/87822/310aa312-9051-9a22-8aff-e9a3c374fbb6.png)
（見やすいように周囲のアイテムを透過しています。）


## アイテムの位置を絶対位置で指定する (position)

コンテナの**子孫**要素に `position: absolute;` が指定されており、その位置決めの基準がコンテナである（≒コンテナに`position: static;`以外が指定されている）場合、その要素はアイテムと同じように `grid-row` / `grid-column` / `grid-area` で位置指定ができます。
`top` / `bottom` / `left` / `right` で位置指定をすると、ラインからの距離を指定することが出来ます。
また、このように配置された要素は他のアイテムの配置に影響しません。

```html:例：itemAをabsoluteで位置指定する
<div id="container">
	<div id="itemA">A</div> <!-- itemA は position: absolute; -->
	<div>B</div> <!-- itemB 以降は特に位置を指定しないが、itemA を避けるということはない。 -->
	<div>C</div>
	<div>D</div>
	<div>E</div>
	<div>F</div>
	<div>G</div>
</div>
```

```css:例：itemAをabsoluteで位置指定する
#container {
	position: relative; /* コンテナが位置決めの基準である */
	display: grid;
	grid-template-rows: 100px 100px;
	grid-template-columns: 100px 100px 100px;
}
#itemA {
	position: absolute; /* 子要素を position: absolute; にする */
	grid-row: 1 / 3;
	grid-column: 2 / 4;
	top: 10px;
	bottom: 10px;
	left: 10px;
	right: 10px;
	opacity: .8;
}
```

![itemAをabsoluteで位置指定する.png](https://qiita-image-store.s3.amazonaws.com/0/87822/a0bf6bc9-33dd-a5bb-0401-b00c5daddee7.png)

なお（実用性があるかどうかは別にして）、この場合のアイテムは必ずしもコンテナの子要素である必要はありません。

```html:これでもいい
<div id="container">
	<div>B<div id="itemA">A</div></div>
	<div>C</div>
	<div>D</div>
	<div>E</div>
	<div>F</div>
	<div>G</div>
</div>
```

## アイテムの重なり順序を指定する (z-index)

`margin` や `position: absolute;` の例のように、アイテム同士が重なることがあります。
その場合の重なり順序を変えるには `z-index` を用います。
なお、アイテムに `position: relative;` などを指定する必要はありません。単純に `z-index` を指定するだけで重なり順序を制御できます。

![z-indexの例.png](https://qiita-image-store.s3.amazonaws.com/0/87822/644d9e12-1524-9399-f36b-9af022b0b843.png)

# ショートハンドで書きたい

今まで説明してきたプロパティにはショートハンドで書けるものが多々あります。
うまく使えばタイピング量を減らせるので、積極的に使っていきたいです。

## grid-template

コンテナに指定します。
`grid-template-rows` / `grid-template-columns` / `grid-template-areas` のショートハンドですが、指定方法にかなり癖があります。
書き方に2パターンがあり、どちらの方法も使い所があるので覚えておくとお得です。

- 書き方1: &lt;grid-template-rows> / &lt;grid-template-columns>

単純に `grid-template-rows` と `grid-template-columns` をスラッシュで区切って続けて書くという書き方です。

```css:grid-templateの書き方1
#container {
	grid-template-rows: 100px 100px;
	grid-template-columns: 200px 200px 200px;
	
	/* ↓こう書ける */
	grid-template: 100px 100px / 200px 200px 200px;
}
```

この方法では `grid-template-areas` は指定できませんが、初期化（`grid-template-areas: none;`）されてしまうので注意です。
つまり、`grid-template-areas` を同時に指定したいなら、後に記述するべきです。

```css:grid-templateの注意点
/* BAD */
#container {
	grid-template-areas:
		"areaA areaB areaC"
		"areaD areaE areaF";
	grid-template: 100px 100px / 200px 200px 200px;
}
/* GOOD */
#container {
	grid-template: 100px 100px / 200px 200px 200px;
	grid-template-areas:
		"areaA areaB areaC"
		"areaD areaE areaF";
}
```

- 書き方2: アスキーアートですべてを同時に指定

この書き方は非常に独特です。
`grid-template-areas` → `grid-template-rows` → `grid-template-columns` の順に書いていくと分かりやすいです。

まず、エリアの名前（`grid-template-areas`）を書いて…

```css
#container {
	grid-template:
		"areaA areaB areaC"
		"areaD areaE areaF"
}
```

次に、それぞれの行の高さ（`grid-template-rows`）を文字列の後に書いて…

```css
#container {
	grid-template:
		"areaA areaB areaC" 100px
		"areaD areaE areaF" 100px
}
```

最後に、それぞれの列の幅（`grid-template-columns`）をスラッシュの後に書きます。

```css:grid-templateの書き方2
#container {
	grid-template:
		"areaA areaB areaC" 100px
		"areaD areaE areaF" 100px
		/ 200px 200px 200px;
}
```

慣れさえすれば、エリアの名前と各トラックの大きさが視覚的に分かり、非常に見やすいプロパティの指定方法となります。

なお、エリアの名前の指定は必須ですが、行の高さと列の幅は指定しなくても構いません。

## grid

コンテナに指定します。
`grid-template-rows` / `grid-template-columns` / `grid-template-areas` / `grid-auto-rows` / `grid-auto-columns` / `grid-auto-flow` / `grid-row-gap` / `grid-column-gap`、つまりコンテナに指定できるグリッド関係のプロパティほぼ全てのショートハンドです。
（`grid` で `grid-row-gap` / `grid-column-gap` を指定する方法はありませんが、同時に初期化されてしまいます。）
これには書き方が2パターンあります。

- 書き方1: `grid-template` と同じ指定をする

`grid` には `grid-template` と全く同じ書き方を指定することが出来ます。
ただし、`grid-template` では初期化しないようなプロパティ（`grid-auto-rows` / `grid-auto-columns` / `grid-auto-flow` / `grid-row-gap` / `grid-column-gap`）も初期化するという点で異なります。
ですので、これもプロパティの書き順に注意が必要です。

```css:gridの注意点
/* BAD */
#container {
	grid-row-gap: 10px;
	grid:
		"areaA areaB areaC" 100px
		"areaD areaE areaF" 100px
		/ 200px 200px 200px;
}
/* GOOD */
#container {
	grid:
		"areaA areaB areaC" 100px
		"areaD areaE areaF" 100px
		/ 200px 200px 200px;
	grid-row-gap: 10px;
}
```

- 書き方2: トラックの大きさとauto-flowの方向を同時に指定する

この書き方では、次のどちらか一方の指定をすることになります。

- `grid-auto-flow: row;` にして、`grid-auto-rows` と `grid-template-columns` を指定する
<br>`grid: auto-flow <grid-auto-rows> / <grid-template-columns>;`
- `grid-auto-flow: column;` にして、`grid-template-rows` と `grid-auto-columns` を指定する
<br>`grid: <grid-template-rows> / auto-flow <grid-auto-columns>;`

なんか一見ややこしいことをしているように思えますが、実に理にかなっています。特にアイテム数が不定の場合によく分かります。

`grid-auto-flow: row;` の方を指定した場合、アイテムは左上から行方向に並んでいき、下に伸びていきます。
この時、列のトラック数は固定数、行のトラック数は可変になります。
つまり、固定数の列トラックに対しては `grid-template-columns` でトラック数と大きさを指定、
可変数の行トラックに対しては `grid-auto-rows` で（トラック数は不明だけど）大きさを指定する、ということが同時に出来ます。

```css:gridの書き方2が有用な例
#container {
	display: grid;
	grid: auto-flow 100px / 200px 200px 200px;
}
```

![gridの書き方2が有用な例.gif](https://qiita-image-store.s3.amazonaws.com/0/87822/8ea8d6a1-0923-0231-4dbc-e6352192f60f.gif)

`grid-auto-flow: column;` の方を指定した場合にも同様のことがいえます。

また、`auto-flow` に続けて `dense` を書くこともできます。

```css:例：gridでdenseを同時に指定する
#container {
	display: grid;
	grid: auto-flow dense 100px / 200px 200px 200px;
}
```

## grid-row / grid-column

実は `grid-row` / `grid-column` もショートハンドです。
`grid-row: 1 / 2;` をロングハンドで書くと、`grid-row-start: 1; grid-row-end: 2;` です。
`grid-column: 1 / 2;` をロングハンドで書くと、`grid-column-start: 1; grid-column-end: 2;` です。
このようにロングハンドで書くと非常に長くなるので、`grid-row-start` などを使うことはあまりないでしょう。

## grid-area

今まで `grid-area` はエリアの名前を指定するために使っていましたが、
実は `grid-row` / `grid-column` のショートハンドでもあります。

`grid-row: A / B; grid-column: C / D;` → `grid-area: A / C / B / D;`
`grid-row: A; grid-column: C;` → `grid-area: A / C;`
のように書けます。

```css:grid-areaでライン番号を指定する
#itemA {
	grid-row: 1 / 2;
	grid-column: 3 / 4;
	
	/* ↓このようにも書ける */
	grid-area: 1 / 3 / 2 / 4;
}
#itemB {
	grid-row: 1;
	grid-column: 3;
	
	/* ↓このようにも書ける */
	grid-area: 1 / 3;
}
```

このように、`grid-row` / `grid-column` のライン指定が共に1つである時は非常に見やすくなります。

また、逆に `grid-area` でのエリア指定を `grid-row` / `grid-column` を使って書くことも出来ます。

```css:grid-row/grid-columnでエリアの名前を指定する
#itemA {
	grid-area: areaA;
	
	/* ↓このようにも書ける */
	grid-row: areaA;
	grid-column: areaA;
}
```

`grid-row: areaA;` などがどういう意味を表すのかは、番外編（作成中）でまたご紹介したいと思います。

## grid-gap

`grid-row-gap` / `grid-column-gap` のショートハンドです。
半角スペースで区切って2つの値を指定しますが、同じ値の場合は1つだけ書くこともできます。

```css:grid-gap
#container1 {
	grid-row-gap: 10px;
	grid-column-gap: 20px;
	
	/* ↓このようにも書ける */
	grid-gap: 10px 20px;
}
#container2 {
	grid-row-gap: 10px;
	grid-column-gap: 10px;
	
	/* ↓このようにも書ける */
	grid-gap: 10px;
}
```

# 【チートシート】CSS Grid Layout のプロパティまとめ

## 要素別

- コンテナに指定するプロパティ

|プロパティ名|値の例|ショートハンド|
|:--|:--|:--|:--|
|**[display][display]**|grid <font color="#ccc">or</font> inline-grid||
|**[grid-template-rows][grid-template-rows]**|100px 200px|<font color="#aa0">★</font>grid-template<br><font color="#a0a">★</font>grid|
|**[grid-template-columns][grid-template-columns]**|300px 400px|<font color="#aa0">★</font>grid-template<br><font color="#a0a">★</font>grid|
|**[grid-template-areas][grid-template-areas]**|"areaA areaB"<br>"areaA areaC"|<font color="#aa0">★</font>grid-template<br><font color="#a0a">★</font>grid|
|<font color="#aa0">★</font>**[grid-template][grid-template]**|100px 200px / 300px 400px<br><font color="#ccc">or</font><br>"areaA areaB" 100px<br>"areaA areaC" 200px<br>/ 300px 400px||
|[grid-auto-flow][grid-auto-flow]|row<br><font color="#ccc">or</font><br>column dense|<font color="#a0a">★</font>grid|
|[grid-auto-rows][grid-auto-rows]|10px 20px|<font color="#a0a">★</font>grid|
|[grid-auto-columns][grid-auto-columns]|30px 40px|<font color="#a0a">★</font>grid|
|[grid-row-gap][grid-row-gap]|3px|<font color="#0aa">★</font>grid-gap<br><font color="#a0a">★</font>grid|
|[grid-column-gap][grid-column-gap]|5px|<font color="#0aa">★</font>grid-gap<br><font color="#a0a">★</font>grid|
|<font color="#0aa">★</font>**[grid-gap][grid-gap]**|3px 5px||
|<font color="#a0a">★</font>**[grid][grid]**|(grid-template と同じ)<br><font color="#ccc">or</font><br>auto-flow 100px / 200px 200px||
|[justify-content][justify-content]|start <font color="#ccc">or</font> center <font color="#ccc">or</font> end||
|[align-content][align-content]|start <font color="#ccc">or</font> center <font color="#ccc">or</font> end||
|[justify-items][justify-items]|start <font color="#ccc">or</font> center <font color="#ccc">or</font> end||
|[align-items][align-items]|start <font color="#ccc">or</font> center <font color="#ccc">or</font> end||

- アイテムに指定するプロパティ

|プロパティ名|値の例|ショートハンド|
|:--|:--|:--|:--|
|[grid-row-start][grid-row-start]|1|<font color="#a00">★</font>grid-row<br><font color="#0a0">★</font>grid-area|
|[grid-row-end][grid-row-end]|2|<font color="#a00">★</font>grid-row<br><font color="#0a0">★</font>grid-area|
|<font color="#a00">★</font>**[grid-row][grid-row]**|1 / 2 <font color="#ccc">or</font> 1||
|[grid-column-start][grid-column-start]|3|<font color="#00a">★</font>grid-column<br><font color="#0a0">★</font>grid-area|
|[grid-column-end][grid-column-end]|4|<font color="#00a">★</font>grid-column<br><font color="#0a0">★</font>grid-area|
|<font color="#00a">★</font>**[grid-column][grid-column]**|3 / 4 <font color="#ccc">or</font> 3||
|<font color="#0a0">★</font>**[grid-area][grid-area]**|areaA<br><font color="#ccc">or</font><br>1 / 3 / 2 / 4<br><font color="#ccc">or</font><br>1 / 3||
|[justify-self][justify-self]|start <font color="#ccc">or</font> center <font color="#ccc">or</font> end||
|[align-self][align-self]|start <font color="#ccc">or</font> center <font color="#ccc">or</font> end||
|[z-index][z-index]|1||
|[order][order]|1||

個人的によく使うものは太字にしました。


# 参考ページ
[CSS Grid Layout Module Level 1](https://www.w3.org/TR/css-grid-1/)
[CSS Grid Layout - CSS | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout)

[1]:http://qiita.com/kura07/items/e633b35e33e43240d363
[2]:http://qiita.com/kura07/items/486c19045aab8090d6d9
[3]:http://www.google.com/
[4]:http://www.google.com/
[display]:http://qiita.com/kura07/items/e633b35e33e43240d363#%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%EF%BC%91-html-%E3%81%A8-%E5%BF%85%E9%A0%88%E3%81%AEcss-%E3%82%92%E8%A8%98%E8%BF%B0%E3%81%99%E3%82%8B
[grid-template-rows]:http://qiita.com/kura07/items/e633b35e33e43240d363#%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%EF%BC%92-css-%E3%81%A7%E5%90%84%E3%83%88%E3%83%A9%E3%83%83%E3%82%AF%E3%81%AE%E5%A4%A7%E3%81%8D%E3%81%95%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B
[grid-template-columns]:http://qiita.com/kura07/items/e633b35e33e43240d363#%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%EF%BC%92-css-%E3%81%A7%E5%90%84%E3%83%88%E3%83%A9%E3%83%83%E3%82%AF%E3%81%AE%E5%A4%A7%E3%81%8D%E3%81%95%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B
[grid-template-areas]:http://qiita.com/kura07/items/e633b35e33e43240d363#%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%EF%BC%93---%E6%96%B9%E6%B3%95%EF%BC%A2-%E3%82%A8%E3%83%AA%E3%82%A2%E3%81%AB%E5%90%8D%E5%89%8D%E3%82%92%E4%BB%98%E3%81%91%E3%81%A6%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B
[grid-template]:http://qiita.com/kura07/items/486c19045aab8090d6d9#grid-template
[grid-auto-flow]:http://qiita.com/kura07/items/486c19045aab8090d6d9#%E8%87%AA%E5%8B%95%E7%9A%84%E3%81%AB%E9%85%8D%E7%BD%AE%E3%81%99%E3%82%8B%E6%96%B9%E5%90%91%E3%82%92%E5%88%97%E6%96%B9%E5%90%91%E3%81%AB%E3%81%99%E3%82%8B-grid-auto-flow
[grid-auto-rows]:http://qiita.com/kura07/items/486c19045aab8090d6d9#%E6%8B%A1%E5%BC%B5%E3%81%97%E3%81%9F%E3%83%88%E3%83%A9%E3%83%83%E3%82%AF%E3%81%AE%E5%A4%A7%E3%81%8D%E3%81%95%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B-grid-auto-rows--grid-auto-columns
[grid-auto-columns]:http://qiita.com/kura07/items/486c19045aab8090d6d9#%E6%8B%A1%E5%BC%B5%E3%81%97%E3%81%9F%E3%83%88%E3%83%A9%E3%83%83%E3%82%AF%E3%81%AE%E5%A4%A7%E3%81%8D%E3%81%95%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B-grid-auto-rows--grid-auto-columns
[grid-row-gap]:http://qiita.com/kura07/items/486c19045aab8090d6d9#%E3%82%BB%E3%83%AB%E5%90%8C%E5%A3%AB%E3%81%AB%E9%9A%99%E9%96%93%E3%82%92%E3%81%82%E3%81%91%E3%82%8B1-grid-row-gap--grid-column-gap
[grid-column-gap]:http://qiita.com/kura07/items/486c19045aab8090d6d9#%E3%82%BB%E3%83%AB%E5%90%8C%E5%A3%AB%E3%81%AB%E9%9A%99%E9%96%93%E3%82%92%E3%81%82%E3%81%91%E3%82%8B1-grid-row-gap--grid-column-gap
[grid-gap]:http://qiita.com/kura07/items/486c19045aab8090d6d9#grid-gap
[grid]:http://qiita.com/kura07/items/486c19045aab8090d6d9#grid
[justify-content]:http://qiita.com/kura07/items/486c19045aab8090d6d9#%E3%82%B0%E3%83%AA%E3%83%83%E3%83%89%E3%81%AE%E4%BD%8D%E7%BD%AE%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B-justify-content--align-content
[align-content]:http://qiita.com/kura07/items/486c19045aab8090d6d9#%E3%82%B0%E3%83%AA%E3%83%83%E3%83%89%E3%81%AE%E4%BD%8D%E7%BD%AE%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B-justify-content--align-content
[justify-items]:http://qiita.com/kura07/items/486c19045aab8090d6d9#%E3%82%A2%E3%82%A4%E3%83%86%E3%83%A0%E3%81%AE%E4%BD%8D%E7%BD%AE%E3%82%92%E4%B8%80%E6%B0%97%E3%81%AB%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B-justify-items--align-items
[align-items]:http://qiita.com/kura07/items/486c19045aab8090d6d9#%E3%82%A2%E3%82%A4%E3%83%86%E3%83%A0%E3%81%AE%E4%BD%8D%E7%BD%AE%E3%82%92%E4%B8%80%E6%B0%97%E3%81%AB%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B-justify-items--align-items
[grid-row-start]:http://qiita.com/kura07/items/486c19045aab8090d6d9#grid-row--grid-column
[grid-row-end]:http://qiita.com/kura07/items/486c19045aab8090d6d9#grid-row--grid-column
[grid-row]:http://qiita.com/kura07/items/e633b35e33e43240d363#%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%EF%BC%93---%E6%96%B9%E6%B3%95%EF%BC%A1-%E3%83%A9%E3%82%A4%E3%83%B3%E3%81%AE%E7%95%AA%E5%8F%B7%E3%81%A7%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B
[grid-column-start]:http://qiita.com/kura07/items/486c19045aab8090d6d9#grid-row--grid-column
[grid-column-end]:http://qiita.com/kura07/items/486c19045aab8090d6d9#grid-row--grid-column
[grid-column]:http://qiita.com/kura07/items/e633b35e33e43240d363#%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%EF%BC%93---%E6%96%B9%E6%B3%95%EF%BC%A1-%E3%83%A9%E3%82%A4%E3%83%B3%E3%81%AE%E7%95%AA%E5%8F%B7%E3%81%A7%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B
[grid-area]:http://qiita.com/kura07/items/e633b35e33e43240d363#%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%EF%BC%93---%E6%96%B9%E6%B3%95%EF%BC%A2-%E3%82%A8%E3%83%AA%E3%82%A2%E3%81%AB%E5%90%8D%E5%89%8D%E3%82%92%E4%BB%98%E3%81%91%E3%81%A6%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B
[justify-self]:http://qiita.com/kura07/items/486c19045aab8090d6d9#%E3%82%A2%E3%82%A4%E3%83%86%E3%83%A0%E3%81%AE%E4%BD%8D%E7%BD%AE%E3%82%92%E5%80%8B%E5%88%A5%E3%81%AB%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B-justify-self--align-self
[align-self]:http://qiita.com/kura07/items/486c19045aab8090d6d9#%E3%82%A2%E3%82%A4%E3%83%86%E3%83%A0%E3%81%AE%E4%BD%8D%E7%BD%AE%E3%82%92%E5%80%8B%E5%88%A5%E3%81%AB%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B-justify-self--align-self
[z-index]:http://qiita.com/kura07/items/486c19045aab8090d6d9#%E3%82%A2%E3%82%A4%E3%83%86%E3%83%A0%E3%81%AE%E9%87%8D%E3%81%AA%E3%82%8A%E9%A0%86%E5%BA%8F%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B-z-index
[order]:http://qiita.com/kura07/items/486c19045aab8090d6d9#%E8%87%AA%E5%8B%95%E7%9A%84%E3%81%AA%E9%85%8D%E7%BD%AE%E3%81%AE%E9%A0%86%E7%95%AA%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B-order