Skip to main content
1 / 2

autoprefixerでgridを有効にしているのにIE11でレイアウトが崩れる

Gulpでautoprefixerを用いていて、コンパイル後のcssには-ms-のベンダープレフィックスは追加されているのですが、IE11だとレイアウトが崩れてしまいます。

崩れるというよりも具体的にはレイアウトが一つだけになってしまいます。

<div class="grid">
    <div class="item">
    テスト
    </div>
    <div class="item">
    テスト
    </div>
    <div class="item">
    テスト
    </div>
    <div class="item">
    テスト 
    </div>
    <div class="item">
    テスト
    </div>
</div

autoprefixer({
 grid: true,
 browsers: ["ie >= 11"]
})

.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1em;
}