CSS)グリッドレイアウト

##用意するもの
```html:index.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS Grid Layout</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="container">
            <div class="item-1">1</div>
            <div class="item-2">2</div>
            <div class="item-3">3</div>
            <div class="item-4">4</div>
            <div class="item-5">5</div>
            <div class="item-6">6</div>
            <div class="item-7">7</div>
            <div class="item-8">8</div>
            <div class="item-9">9</div>
        </div>
    </body>
</html>
```
```css:styles.css
body {
  padding: 0;
  margin: 0;
}
.container {
  background: #eee;
  /* グリッドレイアウト適用 */
  display: grid;
}
.item-1 {
  /* 色の指定 */
  background: hsl(300, 80%, 30%);
}
.item-2 {
  background: hsl(300, 80%, 40%);
}
.item-3 {
  background: hsl(300, 80%, 50%);
}
.item-4 {
  background: hsl(200, 80%, 30%);
}
.item-5 {
  background: hsl(200, 80%, 40%);
}
.item-6 {
  background: hsl(200, 80%, 50%);
}
.item-7 {
  background: hsl(100, 80%, 30%);
}
.item-8 {
  background: hsl(100, 80%, 40%);
}
.item-9 {
  background: hsl(100, 80%, 50%);
}
```
##行と列の指定

方眼紙状にマス目を配置していくので、行と列を指定指定いく

```CSS:styles.css
.container {
  background: #eee;
/* グリッドレイアウト適用 */
  display: grid;
/*1*/
  /*grid-template-rows: 80px 80px 80px;
  grid-template-columns: 80px 80px 80px;*/
/*2*/
  /*grid-template: 80px 80px 80px / 80px 80px 80px;*/
/*3*/
  grid-template: repeat(3, 80px) / repeat(3,80px);
/*4 ブラウザの幅に合わせて要素並べ替え */
  /*grid-template: repeat(3, 80px) / repeat(auto-fill,80px);*/
```
1~3はすべて同じ意味を表すのでどれで書いてもおｋ。
実行結果
<img width="216" alt="2019-10-16 (2).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380732/61d86a90-cac8-ab12-7b45-3a4785cf5535.png">

4の実行結果
<img width="549" alt="2019-10-16 (4).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380732/81c25b21-ff0b-38d7-9d55-9c8271a2de16.png">
<img width="368" alt="2019-10-16 (6).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380732/99211955-463c-cbff-66aa-f072280a325f.png">
こんな感じにブラウザの幅に合わせて並び替えてくれる

##サイズを%　or　比率　で指定

```CSS:styles.css
.container {
/*  background: #eee;
  display: grid;
  grid-template-rows: 80px 80px 80px;*/
/* %指定*/
  grid-template-columns: 50% 80px 80px;
/*比率指定*/
  grid-template-columns: 100px 1fr 2fr;
```
%指定実行結果
<img width="960" alt="2019-10-16 (13).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380732/1747156c-75be-f7e3-d579-2c6891f55f5b.png">

比率指定実行結果
<img width="960" alt="2019-10-16 (15).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380732/99f93ce3-b36e-cdbc-b979-0458707b3c32.png">

##グリッド同士に隙間を持たせる
```CSS:styles.css
.container {
/*background: #eee;
  display: grid;
  grid-template-rows: 80px 80px 80px;
  grid-template-columns: 80px 80px 80px;*/

  /*grid-row-gap: 10px;
  grid-column-gap: 10px;*/
/*まとめて書くと*/
  grid-gap: 10px 10px;
}
```
実行結果
<img width="368" alt="2019-10-16 (17).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380732/d06c11be-ff13-282d-ad06-9bc1277b7e95.png">


##グリッドラインによる要素の配置
```CSS:styles.css
.container {
  /* background: #eee;
  display: grid;
  grid-template-rows: 80px 80px 80px;
  grid-template-columns: 80px 80px 80px; */
}
.item-1 {
  /* background: hsl(300, 80%, 30%); */
  /* 1 */
  grid-row-start: 3;
  grid-row-end: 4;
  /* 2 */
  grid-row: 3 / 4;
  /* 3 */
  grid-row: 3 / span 1;
  /* 4  span1の場合は省略できる*/
  grid-row: 3;

  grid-column: 2 / span 2;
  /* rowとcolumnをまとめると */
  grid-area: 3 / 2 / 4 / 4;
}
```
1~4はすべて同じ意味
grid-area: row-start / column-start / row-end / column-end;
<img width="256" alt="2019-10-16 (8).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380732/c7076997-fe86-3836-2f8c-2245d3dd8032.png">

##エリアを登録して指定
```HTML:index.html
<body>
    <div class="container">
        <div class="item-1">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <!-- <div class="item-5">5</div>
        <div class="item-6">6</div>
        <div class="item-7">7</div>
        <div class="item-8">8</div>
        <div class="item-9">9</div> -->
    </div>
</body>
```
```CSS:styles.css
.container {
  /*background: #eee;
  display: grid;*/
/*1*/
  /*grid-template-rows: 80px 80px 80px;
  grid-template-columns: 80px 80px 80px;*/
/*2*/
  /*grid-template-areas:
    "header header header"
    "main   main   sidebar"
    "footer footer footer";*/

/*1と2をまとめると*/
  grid-template:
    "header header header" 80px
    "main   main  sidebar" 80px
    "footer footer footer" 80px
    / 80px 80px 80px;
}
.item-1 {
  /* background: hsl(300, 80%, 30%); */
  grid-area: header;
}
.item-2 {
  /* background: hsl(300, 80%, 40%); */
  grid-area: main;
}
.item-3 {
  /* background: hsl(300, 80%, 50%); */
  grid-area: sidebar;
}
.item-4 {
  /* background: hsl(200, 80%, 30%); */
  grid-area: footer;
}
```
実行結果
<img width="197" alt="2019-10-16 (11).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380732/a08764ac-f7ba-dd8a-b003-599f8ec46ef7.png">