Help us understand the problem. What is going on with this article?

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

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

▼ MDNの「grid-gap」のデモより。

gap-demo.gif

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

しかし、6/2にリリースされたAutoprefixer v8.6を用いると、IE 11向けにもgapを用いたレイアウトを実現できます

どのように変換されるか?

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

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

.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を実現しているわけです。

.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」によるものです。

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

▼ モダンブラウザ(Chrome)のキャプチャー

▼ IE 11のキャプチャー

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

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

row-gapcolumn-gapも対応

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

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

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

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

.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」を参考に、Autoprefier用の設定をします。

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

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})
              ]
            }
          }
        ]
      }
    ]
  }
};

Gulpの場合

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

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

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

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"));
});

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

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

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

関連資料

tonkotsuboy_com
ICSのインタラクションデザイナーです。「JavaScriptコードレシピ集」の著者。CSS Nite 2017・2018でベストセッションの1人に選出されました。 アプリ開発やWebページ制作が専門で、フロントエンドの情報を随時発信しています。猫の名前は「うに」です。九州大学芸術工学部音響設計学科出身。
https://ics.media
ics
インタラクションデザイン専門のプロダクション。最先端のウェブテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。最新のウェブ技術を発信するサイト「ICS MEDIA」を運営。
https://ics.media/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした