グリッドレイアウトがIE11で崩れる（Autoprefixer使用）

実現したいこと& 問題点

グリッドレイアウトでカラムレイアウトを表示したいと思っています。
グリッドアイテムがカラム落ちしていく仕様です。
GulpでAutoprefixerを使用していて、コンパイル後のCSSを見るとベンダープレフィックスは
追加されているのですが、IE11だとレイアウトが崩れています。（グリッドアイテムが重なっている？）
IE以外のブラウザでは問題無く表示されています。

HTML

html
1<div class="grid">
2	<div class="grid-item">
3	テストテストテスト
4	</div>
5	<div class="grid-item">
6	テストテストテスト 
7	</div>
8	<div class="grid-item">
9	テストテストテスト 
10	</div>
11	<div class="grid-item">
12	テストテストテスト 
13	</div>
14	<div class="grid-item">
15	テストテストテスト 
16	</div>
17</div>

SCSS

scss
1.grid {
2    display: grid;
3    grid-template-columns: 1fr 1fr 1fr;
4    grid-gap: 10px;
5}

コンパイル後のCSS（IE11で崩れる）

css
1.grid {
2  display: -ms-grid;
3  display: grid;
4  -ms-grid-columns: 1fr 1fr 1fr;
5  grid-template-columns: 1fr 1fr 1fr;
6  grid-gap: 10px;
7}

Autoprefixerの設定

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

改善すべき箇所をご指摘いただけるととても助かります。
cssでどのように記述されていればIEでもちゃんと表示されるかだけでもご回答いただけるとありがたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

Autoprefixer の設定を以下のように変更し、

JavaScript
1autoprefixer({
2    browsers: ["last 2 versions", "ie >= 11"],
3    grid: "autoplace" // trueは no-autoplace を表す。 autoplace に変更
4})

SCSS を以下のようにすることで、この CSS は IE11 上でも動作するようになると思います。

SCSS
1.grid {
2  display: grid;
3  grid-template-columns: 1fr 1fr 1fr;
4  grid-template-rows: auto auto auto; /* 変更 */
5  grid-gap: 10px;
6  .grid-item {
7    background: #ffa;
8  }
9}

Autoprefixer を実行すると出力される CSS は以下のようになり、 IE11 でも動作することがわかります(動作確認用リンク)。

CSS
1.grid {
2  display: -ms-grid;
3  display: grid;
4  -ms-grid-columns: 1fr 10px 1fr 10px 1fr;
5  grid-template-columns: 1fr 1fr 1fr;
6  -ms-grid-rows: auto 10px auto 10px auto;
7  grid-template-rows: auto auto auto;
8  grid-gap: 10px;
9}
10
11.grid>*:nth-child(1) {
12  -ms-grid-row: 1;
13  -ms-grid-column: 1;
14}
15
16.grid>*:nth-child(2) {
17  -ms-grid-row: 1;
18  -ms-grid-column: 3;
19}
20
21.grid>*:nth-child(3) {
22  -ms-grid-row: 1;
23  -ms-grid-column: 5;
24}
25
26.grid>*:nth-child(4) {
27  -ms-grid-row: 3;
28  -ms-grid-column: 1;
29}
30
31.grid>*:nth-child(5) {
32  -ms-grid-row: 3;
33  -ms-grid-column: 3;
34}
35
36.grid>*:nth-child(6) {
37  -ms-grid-row: 3;
38  -ms-grid-column: 5;
39}
40
41.grid>*:nth-child(7) {
42  -ms-grid-row: 5;
43  -ms-grid-column: 1;
44}
45
46.grid>*:nth-child(8) {
47  -ms-grid-row: 5;
48  -ms-grid-column: 3;
49}
50
51.grid>*:nth-child(9) {
52  -ms-grid-row: 5;
53  -ms-grid-column: 5;
54}
55
56.grid .grid-item {
57  background: #ffa;
58}

投稿2019/04/11 08:26

編集2019/04/11 09:13

s8_chu

総合スコア14731

umauman

2019/04/11 09:09

こちらで無事解決しました。ありがとうございます！ SCSS上すっきり記述できるのでとても嬉しいです。 1点だけ細かなことで恐れ入りますが、下記変更も何か意味がありますか？どちらでもIEで問題なく表示はされるようですが.. browsers: ["last 2 versions", "ie >= 11"] ↓↓↓ browsers: ["ie >= 11"],