Monthly Archives: 5月 2019

<IE11対応>実務で使うGridレイアウト【機能編】


前回の記事(「実務で使うGridレイアウト【環境構築編(gulp)】」)では、最新版のAutoprefixerの導入と、Grid機能を有効にする設定について解説しました。今回は【機能編】として、IE11への対応を踏まえた上でGridレイアウトを利用するために気をつけなければならないポイントを解説します。
※なお、Gridレイアウトそのものの基本的な使い方については既に習得している前提となりますので、Gridレイアウト自体の使い方を知りたい方はGoogle先生などにお尋ねください。


【機能編】目次

  1. アイテムの配置にはgrid-areaを使う
  2. display: inlneの要素はGridアイテムにならない
  3. IE11での限定的自動配置機能とその制限事項Update.
  4. まとめと今後の課題

アイテムの配置にはgrid-areaを使う

Gridレイアウトにおける各セルへのアイテムの配置方法は複数ありますが、IE11対応も考えるのであれば基本的に「grid-area」一択です。grid-columnやgrid-rowでのアイテム配置は、Autoprefixerによるアイテムの配置が正しく行われないのでやめましょう。
アイテムの配置にgrid-areaを使うということは、grid-template-areaまたはgrid-templateによって各セルに名前をつける必要があるということになります。
以下はgrid-areaによるアイテム配置の例になります。

<div class="grid">
  <header>ヘッダー</header>
  <main>メイン</main>
  <aside>サイドバー</aside>
  <footer>フッター</footer>
</div>
.grid {
  display: grid;
  height: 100vh;
  gap: 20px;
  grid-template-columns: 1fr 4fr;
  grid-template-rows: 100px 1fr 100px;
  grid-template-areas: 
    "header header"
    "sidebar main"
    "footer footer";
  /*grid-templateによるショートハンドの場合はこちら
  grid-template:
    "header header" 100px
    "sidebar main" 1fr
    "footer footer" 100px / 1fr 4fr;
  */
}
header {
  grid-area: header;
  background: tomato;
}
main {
  grid-area: main;
  background: skyblue;
}
aside {
  grid-area: sidebar;
  background: gold;
}
footer {
  grid-area: footer;
  background: pink;
}
.grid {
  display: -ms-grid;
  display: grid;
  height: 100vh;
  grid-gap: 20px;
  gap: 20px;
  -ms-grid-columns: 1fr 20px 4fr;
  grid-template-columns: 1fr 4fr;
  -ms-grid-rows: 100px 20px 1fr 20px 100px;
  grid-template-rows: 100px 1fr 100px;
  grid-template-areas: "header header" "sidebar main" "footer footer";
  /*grid-templateによるショートハンドの場合はこちら
  -ms-grid-rows: 100px 20px 1fr 20px 100px;
  -ms-grid-columns: 1fr 20px 4fr;
  grid-template: "header header" 100px "sidebar main" 1fr "footer footer" 100px / 1fr 4fr;
  */
}

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

main {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  grid-area: main;
  background: skyblue;
}

aside {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: sidebar;
  background: gold;
}

footer {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: footer;
  background: pink;
}

このように、IE11ではgapも一つのセルとなるように行列を引き直し、grid-areaで指定されたセルに対して-ms-grid-row/-ms-grid-columnによる番号指定でアイテムを再配置してくれます。
これを手作業でやることを考えたら、GridのIE対応を手動でやるのがいかに現実的でないか分かりますね(;´Д`)

display: inlneの要素はGridアイテムにならない

さて、上記のHTML/CSSを各ブラウザで表示するとこうなります。

Chromeでの表示
Chromeでの表示
IE11での表示
IE11での表示

……できてないじゃーん!!!!

と、思うかもしれません。ええ、私も最初はそう思いました。
ただ、これはAutoprefixerのせいではありません。IEではdisplay:inlineの要素はGridアイテムの対象にならないバグ(仕様?)があるのです。そして、IE11ではmain要素はデフォルトでdisplay:inlineになってしまいます。なので、main要素をGridアイテムにしたい場合にはmain {display: block;}を明示的に記述してやる必要があるのです。main要素をdisplay:blockにして再度IE11で表示したものがこちらです。

main要素をブロック化したIE11の表示
main要素をブロック化したIE11の表示

はい、無事できました。(ホッ)
ちなみにdisplay:inlineの要素がGridアイテムの対象にならないということは、main要素に限らずa要素やらspan要素やらもそのままではGridレイアウトにできないということです。なのでこれらの要素を対象にGridレイアウトを作りたい場合には、忘れずにdisplay: blockを指定するようにしましょう。

IE11での限定的自動配置機能とその制限事項

Gridレイアウトにはアイテムの「自動配置」の仕組みがありますが、中でも

・repeat() (auto-fill または auto-fit)
・minmax()

といった関数を利用するとメディアクエリなしでレスポンシブレイアウトを実現できたりするなど、非常に柔軟なレイアウトが簡単に実現できます。
(デモ付きでわかりやすい解説がありましたので詳細は以下のブログを参照してください。)

[参考]
「CSS GridとFlexboxを使ってメディアクエリなしでレスポンシブにレイアウトする方法」
「CSS Gridを使うならマスターしておきたいauto-fillとauto-fitの違い」

Gridレイアウトはこうした「同じサイズのボックスが複数行並び、画面幅に応じてカラム数が柔軟に変わるレイアウト」でこそ普段使いのレイアウト手法として威力を発揮すると個人的には思っているので、実務で使うとしたらまずこのようなレイアウトの箇所から導入したいと思っているのですが、残念ながらIE11には「自動配置」の仕組み自体が存在しません。
したがって、上記のブログで紹介されているようなauto-fillやminmax()を活用した柔軟なレイアウトの実装はIE11では物理的に不可能となります。

ただし、ボックスを指定回数繰り返し配置するrepeat() については、v9.4.0のAutoprefixerから限定的に再現可能となっていますので、シンプルなものであればfloatやflexboxの代わりに活用することができるかもしれません。以下にIE11で自動配置機能を利用するための設定と制限事項をまとめましたので参考にしてください。

●自動配置機能を使うための設定

AutoprefixerでIEでの自動配置機能をONにするためには、css(scss)に

/* autoprefixer grid: autoplace */

というコメントを記述する必要があります。
autoprefixerを使う場合にはsassも同時に利用していることが多いと思いますが、
この機能のON/OFFは.scssファイルごとに個別に設定する形となります。
(test1.scssとtest2.scssという2枚のscssファイルがあった場合、test1.scssにだけ前述のコメントを記述すれば、test1.scssに書かれたCSSにだけ自動配置機能が適用される、ということです。パーシャルファイルに記述した場合も同様です。)

2019.6.4追記


AutoprefixerでIE向けに自動配置機能をONにする方法は、css(scss)にコメントで指定する方法以外に、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: "autoplace" //←★trueではなく"autoplace"にする
      })
    ]))
    .pipe(gulp.dest("dist"));
});

この方法であればcss(scss)ファイルごとに個別に指定する必要はないので、こちらの方が効率的と思われます。
詳細はこちら

●制限事項1:行と列の両方を明示しなければならない

AutoprefixerではIEの仕様の範囲内で擬似的に再現しているだけであるので、あらかじめ表示したいアイテム数に応じてそれを全て配置できるだけの行と列を事前に明示しておく必要があります。列の指定は良いとして、行数もあらかじめ指定しておかなければならないというところがこの機能を使う上での最大の難点となります。
これはつまり、「動的に要素を増減させたい場面では利用できない」ということを意味します。
CMSなどから動的にアイテムを出力しており、アイテム数が可変となるような場面では使えないので、実際問題使える場面はかなり限られてしまうと思われます。JSでなにかゴニョゴニョすればできるのかもしれませんが、そこまでやるくらいならfloatなりflexboxなりで頑張ったほうがマシなのではないかと思います。

●制限事項2:レスポンシブさせたい場合はメディアクエリで列数/行数を指定し直す

たとえアイテム数が固定であったとしても、レスポンシブのサイトで画面幅によってカラム数が変更になれば、当然必要となる行数も変わってきます。通常であればこのような時にはGridは暗黙のグリッドを作成して自動的に行数をよしなにしてくれますが、IE11ではこれができません。したがってメディアクエリを使って画面幅ごとにその都度Gridの列数/行数を指定し直す必要があります。

●制限事項3:auto-fit, minmax()などの機能は再現できない

既に言及したとおり、本来のGridレイアウトでrepeat()を活用する際に利用できるauto-fit,auto-fill,minmax()といった便利な機能は全て使用できません。再現できるのはボックスの単純な繰り返し配置のみです。諦めましょう。

●制限事項4:精神衛生上、出力されたCSSは見ない方がいい(苦笑)

IE11のGridレイアウトは、本来エリア名による配置も、gapの指定も、repeat()配置も全て非対応です。IE11にできることは、とにかく行と列を必要な分だけ区切って、行番号・列番号でアイテムをひたすら手動で配置することだけです。この不毛な作業を、Autoprefixerは人間の代わりに行ってくれているだけです。なので、出力されるIE向けのCSSは実に力技です(苦笑)。特にアイテム数が多くなるrepeat()を使った場合、CSSは :nth-child(n)の嵐となることでしょう…。(20個のアイテムをrepeat()で自動配置して、更にメディアクエリで段階的にカラム数・行数が変わるように書いた場合は、20×分岐数分だけの:nth-child(n)が羅列されることになります。)
とりあえず、実際書いたらどうなるのか以下に置いておきますので、本当に使うのかどうかは各自判断してください。

  <ul class="container">
    <li>1アイテム</li>
    <li>2アイテムアイテムアイテムアイテムアイテムアイテムアイテム</li>
    <li>3アイテム</li>
    <li>4アイテム</li>
    <li>5アイテムアイテムアイテムアイテムアイテム</li>
    <li>6アイテム</li>
    <li>7アイテムアイテムアイテムアイテム</li>
    <li>8アイテム</li>
    <li>9アイテムアイテム</li>
    <li>10アイテム</li>
    <li>11アイテムアイテム</li>
    <li>12アイテム</li>
    <li>13アイテム</li>
  </ul>
.container{
  max-width: 960px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 20px;
}
@media (max-width: 768px) {
  .container {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(7, 1fr);
  }
}
.container {
  max-width: 960px;
  margin: auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr;
  grid-template-columns: repeat(5, 1fr);
  -ms-grid-rows: 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr;
  grid-template-rows: repeat(7, 1fr);
  grid-gap: 20px;
  gap: 20px;
}

.container > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.container > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}

.container > *:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
}

.container > *:nth-child(4) {
  -ms-grid-row: 1;
  -ms-grid-column: 7;
}

.container > *:nth-child(5) {
  -ms-grid-row: 1;
  -ms-grid-column: 9;
}

.container > *:nth-child(6) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}

.container > *:nth-child(7) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

.container > *:nth-child(8) {
  -ms-grid-row: 3;
  -ms-grid-column: 5;
}

.container > *:nth-child(9) {
  -ms-grid-row: 3;
  -ms-grid-column: 7;
}

.container > *:nth-child(10) {
  -ms-grid-row: 3;
  -ms-grid-column: 9;
}

.container > *:nth-child(11) {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
}

.container > *:nth-child(12) {
  -ms-grid-row: 5;
  -ms-grid-column: 3;
}

.container > *:nth-child(13) {
  -ms-grid-row: 5;
  -ms-grid-column: 5;
}

.container > *:nth-child(14) {
  -ms-grid-row: 5;
  -ms-grid-column: 7;
}

.container > *:nth-child(15) {
  -ms-grid-row: 5;
  -ms-grid-column: 9;
}

.container > *:nth-child(16) {
  -ms-grid-row: 7;
  -ms-grid-column: 1;
}

.container > *:nth-child(17) {
  -ms-grid-row: 7;
  -ms-grid-column: 3;
}

.container > *:nth-child(18) {
  -ms-grid-row: 7;
  -ms-grid-column: 5;
}

.container > *:nth-child(19) {
  -ms-grid-row: 7;
  -ms-grid-column: 7;
}

.container > *:nth-child(20) {
  -ms-grid-row: 7;
  -ms-grid-column: 9;
}

.container > *:nth-child(21) {
  -ms-grid-row: 9;
  -ms-grid-column: 1;
}

.container > *:nth-child(22) {
  -ms-grid-row: 9;
  -ms-grid-column: 3;
}

.container > *:nth-child(23) {
  -ms-grid-row: 9;
  -ms-grid-column: 5;
}

.container > *:nth-child(24) {
  -ms-grid-row: 9;
  -ms-grid-column: 7;
}

.container > *:nth-child(25) {
  -ms-grid-row: 9;
  -ms-grid-column: 9;
}

.container > *:nth-child(26) {
  -ms-grid-row: 11;
  -ms-grid-column: 1;
}

.container > *:nth-child(27) {
  -ms-grid-row: 11;
  -ms-grid-column: 3;
}

.container > *:nth-child(28) {
  -ms-grid-row: 11;
  -ms-grid-column: 5;
}

.container > *:nth-child(29) {
  -ms-grid-row: 11;
  -ms-grid-column: 7;
}

.container > *:nth-child(30) {
  -ms-grid-row: 11;
  -ms-grid-column: 9;
}

.container > *:nth-child(31) {
  -ms-grid-row: 13;
  -ms-grid-column: 1;
}

.container > *:nth-child(32) {
  -ms-grid-row: 13;
  -ms-grid-column: 3;
}

.container > *:nth-child(33) {
  -ms-grid-row: 13;
  -ms-grid-column: 5;
}

.container > *:nth-child(34) {
  -ms-grid-row: 13;
  -ms-grid-column: 7;
}

.container > *:nth-child(35) {
  -ms-grid-row: 13;
  -ms-grid-column: 9;
}

@media (max-width: 768px) {
  .container {
    -ms-grid-columns: 1fr 20px 1fr;
    grid-template-columns: repeat(2, 1fr);
    -ms-grid-rows: 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr;
    grid-template-rows: repeat(7, 1fr);
  }
  .container > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .container > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  .container > *:nth-child(3) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  .container > *:nth-child(4) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
  .container > *:nth-child(5) {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
  }
  .container > *:nth-child(6) {
    -ms-grid-row: 5;
    -ms-grid-column: 3;
  }
  .container > *:nth-child(7) {
    -ms-grid-row: 7;
    -ms-grid-column: 1;
  }
  .container > *:nth-child(8) {
    -ms-grid-row: 7;
    -ms-grid-column: 3;
  }
  .container > *:nth-child(9) {
    -ms-grid-row: 9;
    -ms-grid-column: 1;
  }
  .container > *:nth-child(10) {
    -ms-grid-row: 9;
    -ms-grid-column: 3;
  }
  .container > *:nth-child(11) {
    -ms-grid-row: 11;
    -ms-grid-column: 1;
  }
  .container > *:nth-child(12) {
    -ms-grid-row: 11;
    -ms-grid-column: 3;
  }
  .container > *:nth-child(13) {
    -ms-grid-row: 13;
    -ms-grid-column: 1;
  }
  .container > *:nth-child(14) {
    -ms-grid-row: 13;
    -ms-grid-column: 3;
  }
}

まとめと今後の課題

IE11の対応もする前提でGridレイアウトを使おうと思うと、何かと制限はありますが

・各セルに明示的にエリア名をつけて運用することが可能なレイアウト
・固定数のボックスを単純に繰り返し配置するレイアウト

であればIE11でも問題なく再現できることが確認できました。
今回はあくまで機能面での再現性の確認でしたが、今後の課題としては、実際の案件で活用していくにあたり、ベストな使い方のノウハウ(サイト全体のレイアウト制御orパーツ単位での制御のどちらが良いか、どのようにグリッド線を構築するのがベストなのか、等)を検討できればな、と考えております。
この辺は一人でウンウン言っていても拉致があかないと思うので、同じように受託の現場での活用を考えている方と率直な意見交換ができればいいなーと思っています。
既に活用していて、「こんな使い方してるよ!」とか「こういうのはうまくいかないよ!」といった経験談を聞かせていただけると嬉しいです!

* * * * * * * * * * * * * * * * * * * * *

【PR】書籍が発売されました♪

2013年の初版、2015年の改訂版に続き、2回目の改訂第2版となる『HTML5&CSS3標準デザイン講座』が2019年5月24日に発売されました♪ヨロシクー!

HTML5&CSS3標準デザイン講座【第2版】
  • タイトル:「HTML5&CSS3標準デザイン講座 【第2版】」
  • ISBN:978-4798158136
  • 出版社:翔泳社
  • 版型・ページ数:B5変・400P・フルカラー
  • 定価:本体2,580円+税
  • 刊行:2019年5月24日(金)

★Amazonでポチる★

<IE11対応>実務で使うGridレイアウト【環境構築編(gulp)】


皆さん、Gridレイアウト使ってますか?
こう質問すると割と「使ってるよー」と答える方も多いかもしれません。
では「受託制作の実務現場でGridレイアウト使ってますか?」と質問したらどうでしょう?
おそらく「バリバリ使ってるよー」という人の割合はグッと減るのではないかと思います。
私も、勉強はしていますがまだ実務での実戦投入は見送っています。

理由はいわずもがな「IE11」の呪いが解けていないからです。
事業会社のように自分のwebサービスを展開している現場であれば自己判断でIE11を切るのも自由ですが、これが受託制作の現場になると、話は別です。
IE11を切るにはクライアントの説得が必要になります。
うまく説得できれば良いですが、

  1. MicrosoftのIE11サポートが2025年まで続く
  2. 日本におけるIE11のシェアがまだ10%近くある
  3. 中国、インドなどの途上国でもまだ古いWindowsが多く使われている
  4. ChroniumベースのEdgeにIE modeが搭載される(※これは無視しても良いと思いますが)

といった状況から、なかなかOKが出ないことも多いかと思います。
少なくともここ1年くらいですぐに状況が劇的に変わるとも思えません。

では受託の現場ではGridレイアウトの導入は諦めるしか無いのでしょうか?
いいえ、我々には「Autoprefixer」という救世主があるではないですか!

というわけで、今回はIE11に対応しながら実務でGridレイアウトを導入するために必要なノウハウを、【環境構築編(gulp)】と【機能編】に分けてまとめてみたいと思います。


【環境構築編(gulp)】目次

  1. なぜautoprefixerを使うのか
  2. autoprefixerの最新版を導入する
  3. gulp-postcssとautoprefixerを使う
  4. うまく動かすための環境構築
  5. gulpfile.jsのautoprefixerの設定を grid: true にする
  6. 自動配置機能を使いたい場合

なぜautoprefixerを使うのか

まずCan I useでCSS Gridの対応状況を確認してみましょう。

IE10-11は-ms-プレフィクス付きの部分対応であることが分かります。
やっかいなのはこれが単純に-ms-をつければいいだけのものではなく、
古い仕様に基づく実装である点です。

詳細は省きますが、flexboxの時と同様、この古い仕様は他のモダンブラウザで採用されている最新の仕様と比較して「何もかもが違う」レベルだと思ったほうが良いです。
プロパティ名も、値も、行列の指定方法も違います。最新仕様で書かれたGridをIEに手動で対応させるのは不可能ではありませんが特に実務においては現実的ではありません。

autoprefixerの最新版を導入する

そこで我らがAutoprefixerの登場となるわけですが、GridレイアウトのIE11対応の恩恵を最大限に受けるためには、最新版のAutoprefixerを導入する必要があります。

Autoprefixerの最新版は現時点(2019年5月)でv9.5.1です。AutoprefixerでのIE11 Grid機能対応自体、ここ数年で様々な機能実装が追加されて段階的に進化してきているものなので、昔導入した古いAutoprefixerをそのまま使っている場合はGrid対応の機能自体が利用できない場合もあります。
特に実務での使い勝手に大きく影響する
・gap(旧grid-gap)の自動変換
・アイテムの自動配置への対応
などの最新機能を全て利用したい場合は少なくともv9.4.0以上のAutoprefixerを使った方がいいので、今回は最新版のAutoprefixerを利用する前提で話を進めたいと思います。

gulp-postcssとautoprefixerを使う

ここでひとつ注意!!
gulpでautoprefixerを利用している場合、使っているプラグインが「gulp-autoprefixer」になっている場合があります。私もそうでした。2〜3年前くらいにNode.jsやgulp、sassと言った環境を見よう見まねで構築した場合、このプラグインを使っている人も多いと思うのですが、GridレイアウトのIE対応をしたい場合はこのプラグインではダメです!
gulp-autoprefixerはしばらくメンテがされておらず、v6.1.0で止まっているからです。
v6.1.0でもgapの自動変換は使うことはできますが、「アイテムの自動配置へ対応」には非対応ですし、その他細々とした新しい機能追加もされていないので、お勧めしません。
これからAutoprefixerでGridのIE11対応しようという方は、postcss/autoprefixerを使いましょう。

うまく動かすための環境構築

今回はすでにgulpを利用した環境構築が出来ている前提でお話しますが、黒い画面の扱いが苦手な人は、最新版のAutoprefixerにしようとした時に関連する各種プログラムのバージョン依存関係等でエラーが出まくって困惑する場合があると思います。(※私がそうです)
なので、私の環境でうまく動いているツールの組み合わせを提示しておきます。

– Node.js: v6.11.2
– gulp: v3.9.1
– gulp-sass: 4.0.2
– gulp-postcss: 8.0.0
– autoprefixer: 9.5.1

また、今回テスト用に用意したpackage.jsonがこちらです。sassのコンパイルとかブラウザの自動リロードといった、autoprefixerの利用だけであれば不要なプラグインも入れていますがその辺は自分の目的に合わせて適宜編集してください。

{
  "name": "grid-ie11",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-postcss": "^8.0.0",
    "autoprefixer": "^9.5.1",
     "postcss-gap-properties": "^1.0.0",
    "gulp-sass": "^4.0.2",
    "gulp-plumber": "^1.1.0",
    "browser-sync": "^2.11.1"
  }
}

gulpfile.jsのautoprefixerの設定を grid: true にする

めでたくgulpでautoprefixerを動作させるところまで到達したら、Autoprefixerの設定でgrid機能を有効にしましょう。gulpの場合はgulpfile.jsの中で 「grid: ture」と設定します。
以下は一般的なautoprefixerを使ったCSS出力のための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 //←★ここが重要
      })
    ]))
    .pipe(gulp.dest("dist"));
});

なお、以下は実際に私がテスト用に用意したgulpfile.jsです。

– /src/以下に開発用ファイル、/dist/に納品用ファイルを格納する
– html以外のcss,js,img,sassなど関連ファイルは全て/assets/内に格納する
– /src/assets/sass/以下の.scssファイルに変更がかかったら、autoprefixerを適用した上でsassをコンパイルして/src/と/dist/に出力し、ブラウザを自動リロードする
– エラーでタスクを止めない、gapプロパティを古いgrid-gapプロパティに変換、といった機能も追加

という前提で作ってあるものです。
(今回はテスト用なので納品用ファイル出力についてはcss以外省略してます。)

const gulp = require("gulp");
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const postcssGapProperties = require("postcss-gap-properties");
const sass = require("gulp-sass");
const plumber = require("gulp-plumber");
const browser = require("browser-sync");

//ディレクトリ設定
const src = "./src/";
const dist = "./dist/";

//サーバー
gulp.task("server", function() {
    browser({
        server: {
            baseDir: "./src/"
        }
    });
});

//gulp-sass
gulp.task("sass", function() {
     gulp.src(src + "/assets/sass/**/*scss")
         .pipe(plumber({
            errorHandler: function(err) {
            console.log(err.messageFormatted);
            this.emit('end');
           }
          }))
         .pipe(sass({outputStyle: 'expanded'}))
         .pipe(postcss([
            postcssGapProperties(),
            autoprefixer({
            grid: true,
            cascade: false,
            browsers: ["last 4 versions", "ie 9", "ie 10", "android >= 4", "ios_saf >= 8"]
          })
       ]))
         .pipe(gulp.dest(src + "/assets/css/"))
         .pipe(gulp.dest(dist + "/assets/css/"))
         .pipe(browser.reload({stream:true}))
});

//タスクの監視
gulp.task("default", ["server"], function() {
    gulp.watch(src + "/assets/sass/**/*.scss",["sass"]);
});

自動配置機能を使いたい場合

gulpfile.jsでgrid: trueに設定した上で、IE11でもGridアイテムの自動配置機能を有効にしたい場合は、css(scss)の方に

/* autoprefixer grid: autoplace */

というコメントを追記するようにしてください。
参考:https://github.com/postcss/autoprefixer/releases/tag/9.4.0

これはAutoprefixer v9.4.0から追加された機能で、この記述を加えることにより
本来使うことのできないGridアイテムの自動配置をIE11でも擬似的に再現するようにコードを書き換えてくれます。(こちらの機能の詳細は後日【機能編】の方で解説します)

まとめ

いかがでしたでしょうか?
この記事はあくまで「すでにgulpを使ったautoprefixerの利用を行っている」人が、バージョンを上げてgrid機能を使えるようにするために必要な情報だけをまとめたものになりますので、そもそもgulpを始めとするタスクランナーを使った開発環境自体に馴染みがないという方は、頑張ってNode.jsのインストールから始めてみてください。
ちなみにちょっと古いですが、以前私がNode.jsのインストールに苦戦した時の記録がありますので参考までにどうぞ(苦笑)
・「Node.jsインストール攻略法【非エンジニア向け】

おまけ

「黒い画面使いたくない!でもGridのIE対応したい!!」というワガママさんには、
Autoprefixer online」というWeb上のツールがありますので、
普通にCSSを書いてこのツールに放り込んでみるといいと思います。
これなら環境構築しなくても最新版のAutoprefixerが使えます。(いちいちコピペしないといけないので面倒くさいですけどねー)

おまけ2

BracketsやSublime Text向けに、エディタプラグイン版のAutoprefixerも存在していますが、こちらはバージョンが古くてGrid機能自体が使えませんのでおすすめしません。

* * * * * * * * * * * * * * * * * * * * *

【PR】書籍が発売されます♪

2013年の初版、2015年の改訂版に続き、2回目の改訂第2版となる『HTML5&CSS3標準デザイン講座』が2019年5月24日に発売されます♪ヨロシクー!

HTML5&CSS3標準デザイン講座【第2版】
  • タイトル:「HTML5&CSS3標準デザイン講座 【第2版】」
  • ISBN:978-4798158136
  • 出版社:翔泳社
  • 版型・ページ数:B5変・400P・フルカラー
  • 定価:本体2,580円+税
  • 刊行:2019年5月24日(金)

★Amazonでポチる★