autoprefixerでgridを有効にしているのにIE11でレイアウトが崩れる
Gulpでautoprefixerを用いていて、コンパイル後のcssには-ms-のベンダープレフィックスは追加されているのですが、IE11だとレイアウトが崩れてしまいます。
崩れるというよりも具体的にはレイアウトが一つだけになってしまいます。
HTML
<div class="grid">
<div class="item">
テスト
</div>
<div class="item">
テスト
</div>
<div class="item">
テスト
</div>
<div class="item">
テスト
</div>
<div class="item">
テスト
</div>
</div
gulpfile.js
autoprefixer({
grid: true,
browsers: ["ie >= 11"]
})
CSS
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1em;
}