IEに対応したCSS Grid Layoutことはじめ

# CSS Gridの現状

レイアウト用のcssプロパティと言えば、古くはfloatや最近ではflexboxが主流ですが、
主要モダンブラウザの対応によりCSS Gridも選択肢に入ってきました。
意外や意外、IE11も対応してるんですね。

## Can i use
<img width="952" alt="コメント 2019-09-08 215535.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336446/7c3083a3-ba5e-1162-2500-f3ba18d2e255.png">

ただ、IE11は古い仕様のCSS Gridにしか対応していません。
ですので、実際にはAutoprefixerで変換する必要があります。

手軽なのはオンライン版のAutoprefixerです。
https://autoprefixer.github.io/

## HTMLソースコード
```html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>CSS Grid</title>
</head>

<body>
  <div class="container">
    <header class="header">header</header>
    <aside class="aside">aside</aside>
    <main class="main">main</main>
    <nav class="nav">nav</nav>
    <footer class="footer">footer</footer>
  </div>
</body>
</html>
```

## CSS(モダンブラウザ)
```css

html, body {
  margin: 0;
  padding: 0;
  font-size: 24px;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.container  {
  min-height: 100vh;
  height: 100%;
  display: grid;
  grid-template:
  "header header header" 1fr
  "aside main nav" 3fr
  "footer footer footer" 100px /
  220px 1fr 220px;
  gap: 40px 10px;
}

.container > * {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header {
  background-color: red;
  width: 100%;
  height: 100%;
  grid-area: header;
}

.aside {
  background-color: green;
  height: 100%;
  grid-area: aside;
}

.main {
  background-color: blue;
  grid-area: main;
}

.nav {
  background-color: yellow;
  grid-area: nav;
}

.footer {
  background-color: purple;
  width: 100%;
  grid-area: footer;
}
```
モダンブラウザでは綺麗にレイアウトされています。↓
![127.0.0.1_5501_index.html.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336446/c23bbf3a-d626-d8f6-e834-af5d99b474d2.png)

cssの記述と実際の画面を比較してみると、割と直感的だったりします。
![コメント 2020-03-31 151602.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336446/36bc3411-8ff3-f9b8-d943-47607ec7365a.png)


しかし、IE11では...
![コメント 2020-03-31 152129.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336446/433c5bcd-35fb-219a-f050-804665acd2cc.png)
全ての要素が縦に積まれており、header要素が画面を埋め尽くしています。

では、AutoprefixerでIE対応してみましょう。

## CSS（IE11対応版）
```css

html, body {
  margin: 0;
  padding: 0;
  font-size: 24px;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.container  {
  min-height: 100vh;
  height: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr 40px 3fr 40px 100px;
  -ms-grid-columns: 220px 10px 1fr 10px 220px;
      grid-template:
  "header header header" 1fr
  "aside main nav" 3fr
  "footer footer footer" 100px /
  220px 1fr 220px;
  gap: 40px 10px;
}

.container > * {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.header {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 5;
  background-color: red;
  width: 100%;
  height: 100%;
  grid-area: header;
}

.aside {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  background-color: green;
  height: 100%;
  grid-area: aside;
}

.main {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  background-color: blue;
  grid-area: main;
}

.nav {
  -ms-grid-row: 3;
  -ms-grid-column: 5;
  background-color: yellow;
  grid-area: nav;
}

.footer {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 5;
  background-color: purple;
  width: 100%;
  grid-area: footer;
}
```

## おまけ：npmを使う場合

```bash
npm init -y
npm i -D node-sass postcss-cli autoprefixer
```

```js:package.json
{
  "name": "cssgrid",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "node-sass ./scss/style.scss -o ./css",
    "autoprefixer": "postcss ./css/style.css --use autoprefixer -d ./css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.7.5",
    "node-sass": "^4.13.1",
    "postcss-cli": "^7.1.0"
  }
}
```
CSS Gridのオプションを設定するには、scssまたはcssファイル冒頭にコメントを追記

```scss:style.scss
/* autoprefixer grid: autoplace */

~以下略~
```

または、タスク実行時に環境変数を頭につける

```bash
AUTOPREFIXER_GRID=autoplace npm run autoprefixer
```
もしくは、設定ファイルを作成

```postcss.config.js
module.exports = () => ({
  plugins: {
    'autoprefixer': {
      grid: "autoplace"
    }
  }
})
```

```json:package.json
  "scripts": {
    "build": "node-sass ./scss/style.scss -o ./css",
    "autoprefixer": "postcss ./css/style.css -d ./css -c=postcss.config.js"
  },
```