display: grid;でgapの指定がIE11で効かない

Question

&__block {
  display: grid;
  gap:20px;
  grid-template: 'a b c d e' 1fr /1fr 100px 100px 100px;
}

以下の記事を参考にautoprefixerをいれたところ、grid-areaなどgap以外のgird指定がIEでもきちんと反映するようになりました。

Gulpのautoprefixerを利用する

最新のautoprefixerではgapも上手く反映してくれるとの記事もあり、
"autoprefixer": "^9.5.1",←最新のautoprefixerが入っていのでgapも動作すると思いましたがダメでした。

    .pipe(postcss([
      autoprefixer({
        // ☆IEは11以上、Androidは4.4以上
        // その他は最新2バージョンで必要なベンダープレフィックスを付与する設定
        browsers: ["last 2 versions", "ie >= 11", "Android >= 4"],
        cascade: false,
        grid:true
      })
    ]))

gapが反映されないとブロック同士の余白が作れないので、他に方法や手順に間違いなどありましたら是非教えていただきたいです！！

Answer 1

&__block {
  display: grid;
  //gap:20px;
  grid-template: 'a . b . c . d . e' 1fr /1fr 20px 100px 20px 100px 20px 100px;
}

ひとまずこの形で対応しました。IEがなくなるのが先か、オートプリフィクサーが対応してくれるのが先か…

Comments

[s8_chu]

原因の 1 つとして、 grid オプションを true に設定した場合、自動配置は行われないことが影響していると考えられます。