CSS Gridのgap（grid-gap）が遂にIE 11でも再現できるように。Autoprefixerが待望のアップデート



`gap`プロパティ（旧名`grid-gap`）を用いると、CSS Gridにおける列と行の間隔を設定できます。

▼ MDNの「[grid-gap](https://developer.mozilla.org/ja/docs/Web/CSS/grid-gap)」のデモより。

![gap-demo.gif](https://qiita-image-store.s3.amazonaws.com/0/67884/96596a69-a41e-5341-ab3a-03bf5941624f.gif)

便利なプロパティですが、IE 11には対応しておらず、CSS Gridにおける苦労点の一つでした。

しかし、**6/2にリリースされた[Autoprefixer v8.6](https://github.com/postcss/autoprefixer)を用いると、IE 11向けにも`gap`を用いたレイアウトを実現できます**。

# どのように変換されるか？
`gap`を使ったCSSコードがどのように変換されるかを確認してみましょう。次のようなコードを例に紹介します。

`grid-template`プロパティの書き方は見慣れないかもしれませんが、グリッドのエリア名、列幅、行幅をまとめて指定する手法です。`grid-template-areas`で定義したエリア名に加えて、行幅がそれぞれ`50px`、`1fr`、`50px`、列幅が`200px`、`1fr`であることを示します。

```css
.container {
  display: grid;
  gap: 10px;
  grid-template:
    "header header" 50px
    "aside  main"   1fr
    "footer footer" 50px /
     200px  1fr;
}

header {
  grid-area: header;
}

aside {
  grid-area: aside;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}
```

これをAutoprefixer 8.6で変換すると、次のようなコードになります。`gap`に指定した`10px`が、`-ms-grid-rows`と`-ms-grid-columns`に適切に設定されています。列の間と行の間に`10px`を設定することで、`gap`を実現しているわけです。

```css
.container {
  display: -ms-grid;
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  -ms-grid-rows: 50px 10px 1fr 10px 50px;
  -ms-grid-columns: 200px 10px 1fr;
  grid-template:
    "header header" 50px
    "aside  main"   1fr
    "footer footer" 50px /
     200px  1fr;
}

header {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: header;
}

aside {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: aside;
}
/* 中略 */
```

※ `grid-template-area`で設定したエリア名が適切に変換されているのは、「[AutoprefixerがパワーアップしてCSS GridのIE 11対応がバリ楽になってた - Qiita](https://qiita.com/tonkotsuboy_com/items/bce73685cd6b1ea511dc)」によるものです。

このCSSを用いてブラウザで確認してみると、モダンブラウザはもちろん、IE 11でも意図通り列、行間に`10px`が設定されているのがわかります。

▼ モダンブラウザ（Chrome）のキャプチャー

![](https://qiita-image-store.s3.amazonaws.com/0/67884/f0c2b662-86cb-4fb5-a7bc-40c6ddf4b11d.png)

▼ IE 11のキャプチャー
 ![](https://qiita-image-store.s3.amazonaws.com/0/67884/50f6bf16-16e5-2d8a-29d8-ad01e4fbe10e.png)

- [デモの全コード](https://codepen.io/tonkotsuboy/pen/PeBBew)

# `gap`対応を行うなら`grid-template`プロパティを使う

親要素ではデモのように`grid-template`プロパティを使うことで、IE 11の`gap`対応が行われます。**`grid-template-rows`プロパティ、`grid-template-columns`プロパティを使うとIE 11向けの`gap`対応が行われないので注意してください**。

# `row-gap`、`column-gap`も対応

行の`gap`のための`row-gap`（旧名`grid-row-gap`）プロパティ、列の
`gap`のための`column-gap`（旧名`grid-column-gap`）プロパティにも対応可能です。

例えば次のCSSコードの変換を考えてみます。

```css
.container {
  row-gap: 10px;
  column-gap: 20px;
  grid-template:
    "header header" 50px
    "aside  main"   1fr
    "footer footer" 50px /
     200px  1fr;
}
```

変換すると、次のようになります。

```css
.container {
  grid-row-gap: 10px;
  row-gap: 10px;
  grid-column-gap: 20px;
  -webkit-column-gap: 20px;
  column-gap: 20px;
  -ms-grid-rows: 50px 10px 1fr 10px 50px;
  -ms-grid-columns: 200px 20px 1fr;
  grid-template:
    "header header" 50px
    "aside  main"   1fr
    "footer footer" 50px /
     200px  1fr;
}
```

# `gap`対応のための環境設定
webpack向け、Gulp向けに`gap`対応のための設定方法を紹介します。面倒であれば、コピペで使える設定ファイルを準備しましたのでそちらを使用してください。

## webpackの場合

記事「[webpack入門 – PostCSS(Autoprefixer)を取り込む方法 - ICS MEDIA](https://ics.media/entry/17376#postcss-autoprefixer)」を参考に、Autoprefier用の設定をします。

autoprefixerの引数で`grid: true`を指定することを忘れないようにしてください。

```js:webpack.config.js
module.exports = {
  mode: "development",
  module: {
    rules: [
      {
        test: /\.css/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              url: false,
              importLoaders: 1
            },
          },
          // PostCSSのための設定
          {
            loader: "postcss-loader",
            options: {
              plugins: [
                // Autoprefixerを有効化
                // ベンダープレフィックスを自動付与する
                require("autoprefixer")({grid: true})
              ]
            }
          }
        ]
      }
    ]
  }
};
```

- [webpack用デモファイル](https://github.com/tonkotsuboy/kanobox/tree/master/180515_autoprefixer/1_webpack)


## Gulpの場合
`gulp-postcss`（GulpでPostCSSを使うためのプラグイン）、autoprefixerなど、必要なモジュールをインストールします。

```bash
npm init -y
npm i -D gulp gulp-postcss autoprefixer
```

`gulpfile.js`のタスクにPostCSSの設定を加えます。また、autoprefixerの引数で`grid: true`を指定することを忘れないようにしてください。

```js:gulpfile.js
const gulp = require("gulp");
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");

gulp.task("default", function () {
  return gulp.src("src/style.css")
    .pipe(postcss([
      autoprefixer({
        grid: true,
        cascade: false
      })
    ]))
    .pipe(gulp.dest("dist"));
});
```

- [Gulp用デモファイル](https://github.com/tonkotsuboy/kanobox/tree/master/180515_autoprefixer/2_gulp)


# Autoprefixerがあれば`gap`も自由に使える

`grid-template-rows`で行の間、`grid-template-columns`で列の間に隙間を入れて`gap`を表現するというのは私も考えていた手法でしたが、その自動変換となると敷居が高く、実現できずにいました。[IE 11向けに`grid-template-areas`や`*-span`の自動記述ができるようになり](https://qiita.com/tonkotsuboy_com/items/bce73685cd6b1ea511dc)、加えて`gap`のIE 11向け対応まで行うということであれば、これほど楽なことはありません。

IE 11の未対応プロパティゆえにCSS Grid導入を見送っていた開発者にとっては、朗報のAutoprefixerのアップデートと言えるでしょう。


## 関連資料


- [AutoprefixerがパワーアップしてCSS GridのIE 11対応がバリ楽になってた - Qiita](https://qiita.com/tonkotsuboy_com/items/bce73685cd6b1ea511dc)
- [CSSベンダープレフィックス-webkit-を今この瞬間に辞める為のAutoprefixerの導入 - Qiita](https://qiita.com/tonkotsuboy_com/items/377913c51b1ac00deffe#_reference-26d6a4cf6425a98294a3)
- [Grid Layoutがやってきた！ Flexboxやfloatとの適切な使い分け方法 - CSS Nite](http://cssnite.jp/archives/post_2964.html)（スライド、動画あり）
- [CSS Grid Layoutをガッツリ使った所感 - ICS MEDIA](https://ics.media/entry/17403)
- [最新版で学ぶwebpack 4入門 - スタイルシート(CSSやSass)を取り込む方法 - ICS MEDIA](https://ics.media/entry/17376)
- [絶対つまずかないGulp入門(2018年版) - インストールとSassを使うまでの手順 - ICS MEDIA](https://ics.media/entry/3290)