css グリッドレイアウト（display: grid;）をIE10/IE11でも対応させるためにはどうすればよいでしょうか？

###前提・実現したいこと
cssグリッドレイアウト構造を利用して下記画像のデザインを作成したいです。
●対応したいブラウザ chorome,firefox,safari,Edge,IE11

cssグリッドレイアウトを下記の記事を参考に設置してみました。
CSS Grid Layout を極める！（場面別編）

can I useの情報によればchorome,firefox,safari最新版はベンダープレフィックスをつけなくても表示成功しました。

Edge,IE11にも対応させるために下記のサイトを参考にベンダープレフィックスを付与しました。
EDGE対応参考記事
 EDGE対応参考記事その２

ここで問題が発生！
EDGEでは表示が成功しましたが、IE11では効きませんでした。IE11対応するためには何が足りてないでしょうか、ご教示お願いします。
下記にソース掲載します。

html
1<body>
2  <ul class="grid_area">
3    <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No1]"></li>
4    <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No2]"></li>
5    <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No3]"></li>
6    <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No4]"></li>
7    <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No5]"></li>
8    <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No6]"></li>
9    <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No7]"></li>
10    <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No8]"></li>
11    <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No9]"></li>
12  </ul>
13</body>

css
1*{
2  padding:0;
3  margin:0;
4}
5
6ul.grid_area {
7  width: 1000px;
8  margin:0 auto;
9  display: grid;
10  display: -ms-grid;
11  grid-template-columns: repeat(6, 1fr);
12  -ms-grid-columns: repeat(6, 1fr);
13  grid-gap: 10px;
14  /*grid-auto-rows: minmax(100px, auto);*/
15  list-style: none;
16}
17ul.grid_area li{
18  background: #ccc;
19}
20ul.grid_area li img{
21  max-width: 100%;display: block;
22}
23
24
25/*IE10*/
26@media all and (-ms-high-contrast:none) {
27  ul.grid_area li {
28        margin: 5px;
29  }
30}
31
32/*IE11*/
33@media all and (-ms-high-contrast:none) {
34       *::-ms-backdrop, ul.grid_area li {
35    margin: 5px;
36  }
37}
38
39/*EDGE*/
40_:-ms-lang(x), _::-webkit-meter-bar,ul.grid_area li {
41  margin: 5px;
42}
43
44ul.grid_area li:nth-child(1) {
45  grid-column: 1;
46  -ms-grid-column: 1;
47  grid-row: 1;
48  -ms-grid-row: 1;
49}
50ul.grid_area li:nth-child(2) { 
51  grid-column: 2;
52  -ms-grid-column: 2;
53  grid-row: 1;
54  -ms-grid-row: 1;
55}
56ul.grid_area li:nth-child(3) {
57  grid-column: 3/5;
58  -ms-grid-column: 3;
59  -ms-grid-row-span:2;
60  grid-row: 1/3;
61  -ms-grid-row: 1;
62  -ms-grid-column-span:2;
63}
64ul.grid_area li:nth-child(4) {
65  grid-column: 5;
66  -ms-grid-column: 5;
67  grid-row: 1;
68  -ms-grid-row: 1;
69}
70ul.grid_area li:nth-child(5) {
71  grid-column: 6;
72  -ms-grid-column: 6;
73  grid-row: 1;
74  -ms-grid-row: 1;
75
76}
77ul.grid_area li:nth-child(6) {
78  grid-column: 1/3;
79  -ms-grid-column: 1;
80  -ms-grid-column-span:2;
81  grid-row: 2/4;
82  -ms-grid-row: 2;
83  -ms-grid-row-span:2;
84}
85ul.grid_area li:nth-child(7) {
86  grid-column: 3;
87  -ms-grid-column: 3;
88  grid-row: 3;
89  -ms-grid-row: 3;
90}
91ul.grid_area li:nth-child(8) {
92  grid-column: 4;
93  -ms-grid-column: 4;
94  grid-row: 3;
95  -ms-grid-row: 3;
96}
97ul.grid_area li:nth-child(9) {
98  grid-column: 5/7;
99  -ms-grid-column: 5;
100  -ms-grid-row-span:2;
101  grid-row: 2 / 4;
102  -ms-grid-row: 2;
103  -ms-grid-column-span:2;
104}

###発生している問題
IE11ではこのように表示させる

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

回答3件

ul.wrapper要素に-ms-grid-columns,-ms-grid-rowsを追記しました。
しかしこのベンダープレフィックスのタグにはrepeatが使えないようですね。
更新後のcssを記述します。

css
1*{
2  padding:0;
3  margin:0;
4}
5
6ul.grid_area {
7  width: 1000px;
8  margin:0 auto;
9  display: grid;
10  display: -ms-grid;
11  grid-template-columns: repeat(6, 1fr);
12  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
13  grid-gap: 10px;
14  /*grid-auto-rows: minmax(100px, auto);*/
15  -ms-grid-rows: 1fr 1fr 1fr;
16  list-style: none;
17}
18ul.grid_area li{
19  background: #ccc;
20}
21ul.grid_area li img{
22  display: block;
23  max-width: 100%;
24}
25
26
27/*IE10*/
28@media all and (-ms-high-contrast:none) {
29  ul.grid_area{
30	margin-top: -5px;
31	margin-bottom: -5px;
32  }
33  ul.grid_area li {
34    margin: 5px;
35  }
36}
37
38/*IE11*/
39@media all and (-ms-high-contrast:none) {
40       *::-ms-backdrop, 
41	ul.grid_area{
42	margin-top: -5px;
43	margin-bottom: -5px;
44	}
45    ul.grid_area li {
46    	margin: 5px;
47  	}
48}
49
50/*EDGE*/
51_:-ms-lang(x), _::-webkit-meter-bar,ul.grid_area {
52	margin-top: -5px;
53	margin-bottom: -5px;
54}
55
56_:-ms-lang(x), _::-webkit-meter-bar,ul.grid_area li {
57  margin: 5px;
58}
59
60ul.grid_area li:nth-child(1) {
61  grid-column: 1;
62  -ms-grid-column: 1;
63  grid-row: 1;
64  -ms-grid-row: 1;
65}
66ul.grid_area li:nth-child(2) { 
67  grid-column: 2;
68  -ms-grid-column: 2;
69  grid-row: 1;
70  -ms-grid-row: 1;
71}
72ul.grid_area li:nth-child(3) {
73  grid-column: 3/5;
74  -ms-grid-column: 3;
75  -ms-grid-column-span:2;
76  grid-row: 1/3;
77  -ms-grid-row: 1;
78  -ms-grid-row-span:2;
79}
80ul.grid_area li:nth-child(4) {
81  grid-column: 5;
82  -ms-grid-column: 5;
83  grid-row: 1;
84  -ms-grid-row: 1;
85}
86ul.grid_area li:nth-child(5) {
87  grid-column: 6;
88  -ms-grid-column: 6;
89  grid-row: 1;
90  -ms-grid-row: 1;
91
92}
93ul.grid_area li:nth-child(6) {
94  grid-column: 1/3;
95  -ms-grid-column: 1;
96  -ms-grid-column-span:2;
97  grid-row: 2/4;
98  -ms-grid-row: 2;
99  -ms-grid-row-span:2;
100}
101ul.grid_area li:nth-child(7) {
102  grid-column: 3;
103  -ms-grid-column: 3;
104  grid-row: 3;
105  -ms-grid-row: 3;
106}
107ul.grid_area li:nth-child(8) {
108  grid-column: 4;
109  -ms-grid-column: 4;
110  grid-row: 3;
111  -ms-grid-row: 3;
112}
113ul.grid_area li:nth-child(9) {
114  grid-column: 5/7;
115  -ms-grid-column: 5;
116  -ms-grid-column-span:2;
117  grid-row: 2 / 4;
118  -ms-grid-row: 2;
119  -ms-grid-row-span:2;
120}
121

もしバグがありましたらなんなりと申してください、よろしくお願いします。

投稿2017/08/14 17:06

編集2017/08/15 07:47

holic

総合スコア134

syuuphxさんの情報と私が修正した箇所を合わせたcssを下記に記述します。

css
1*{
2  padding:0;
3  margin:0;
4}
5
6ul.grid_area {
7  width: 1000px;
8  margin:0 auto;
9  display: grid;
10  display: -ms-grid;
11  grid-template-columns: repeat(6, 1fr);
12  -ms-grid-columns: (1fr)[6];
13  grid-gap: 10px;
14  /*grid-auto-rows: minmax(100px, auto);*/
15  -ms-grid-rows: (1fr)[3];
16  list-style: none;
17}
18ul.grid_area li{
19  background: #ccc;
20}
21ul.grid_area li img{
22  display: block;
23  max-width: 100%;
24}
25
26
27/*IE10*/
28@media all and (-ms-high-contrast:none) {
29  ul.grid_area{
30	margin-top: -5px;
31	margin-bottom: -5px;
32  }
33  ul.grid_area li {
34    margin: 5px;
35  }
36}
37
38/*IE11*/
39@media all and (-ms-high-contrast:none) {
40       *::-ms-backdrop, 
41	ul.grid_area{
42	margin-top: -5px;
43	margin-bottom: -5px;
44	}
45    ul.grid_area li {
46    	margin: 5px;
47  	}
48}
49
50/*EDGE*/
51_:-ms-lang(x), _::-webkit-meter-bar,ul.grid_area {
52	margin-top: -5px;
53	margin-bottom: -5px;
54}
55
56_:-ms-lang(x), _::-webkit-meter-bar,ul.grid_area li {
57  margin: 5px;
58}
59
60ul.grid_area li:nth-child(1) {
61  grid-column: 1;
62  -ms-grid-column: 1;
63  grid-row: 1;
64  -ms-grid-row: 1;
65}
66ul.grid_area li:nth-child(2) { 
67  grid-column: 2;
68  -ms-grid-column: 2;
69  grid-row: 1;
70  -ms-grid-row: 1;
71}
72ul.grid_area li:nth-child(3) {
73  grid-column: 3/5;
74  -ms-grid-column: 3;
75  -ms-grid-column-span:2;
76  grid-row: 1/3;
77  -ms-grid-row: 1;
78  -ms-grid-row-span:2;
79}
80ul.grid_area li:nth-child(4) {
81  grid-column: 5;
82  -ms-grid-column: 5;
83  grid-row: 1;
84  -ms-grid-row: 1;
85}
86ul.grid_area li:nth-child(5) {
87  grid-column: 6;
88  -ms-grid-column: 6;
89  grid-row: 1;
90  -ms-grid-row: 1;
91
92}
93ul.grid_area li:nth-child(6) {
94  grid-column: 1/3;
95  -ms-grid-column: 1;
96  -ms-grid-column-span:2;
97  grid-row: 2/4;
98  -ms-grid-row: 2;
99  -ms-grid-row-span:2;
100}
101ul.grid_area li:nth-child(7) {
102  grid-column: 3;
103  -ms-grid-column: 3;
104  grid-row: 3;
105  -ms-grid-row: 3;
106}
107ul.grid_area li:nth-child(8) {
108  grid-column: 4;
109  -ms-grid-column: 4;
110  grid-row: 3;
111  -ms-grid-row: 3;
112}
113ul.grid_area li:nth-child(9) {
114  grid-column: 5/7;
115  -ms-grid-column: 5;
116  -ms-grid-column-span:2;
117  grid-row: 2 / 4;
118  -ms-grid-row: 2;
119  -ms-grid-row-span:2;
120}

投稿2017/08/16 09:25

holic

総合スコア134

ベストアンサー

ho_riさんのご指摘通り、 ul.wrapper の -ms-grid-columns の記述方法に誤りがあります。
今回の場合、 -ms-grid-columns で繰り返しを表現するには、カラムのサイズを丸括弧で囲み、後ろに大括弧で繰り返す回数を入力します。

This property also supports a repeating syntax. If there are a large number of columns that are the same or exhibit a recurring pattern, a repeat syntax can be applied to define the columns in a more compact form. The repeated values are enclosed by parentheses, and are followed by an integer within brackets (for instance, [4]) that indicates how many times to repeat the values in parentheses. See Examples for a demonstration

今回の場合は不要ですが、-ms-grid-rows も同じく、後ろに大括弧で繰り返す回数を入力できます。
詳しくは公式リファレンスをご確認ください。

-ms-grid-columns property (Internet Explorer)

-ms-grid-rows property (Internet Explorer)

訂正したCSSを記載しておきます。12行目 -ms-grid-columns の部分のみ変更しております。

css
1*{
2  padding:0;
3  margin:0;
4}
5
6ul.grid_area {
7  width: 1000px;
8  margin:0 auto;
9  display: grid;
10  display: -ms-grid;
11  grid-template-columns: repeat(6, 1fr);
12  -ms-grid-columns: (1fr)[6];
13  grid-gap: 10px;
14  /*grid-auto-rows: minmax(100px, auto);*/
15  list-style: none;
16}
17ul.grid_area li{
18  background: #ccc;
19}
20ul.grid_area li img{
21  max-width: 100%;display: block;
22}
23
24
25/*IE10*/
26@media all and (-ms-high-contrast:none) {
27  ul.grid_area li {
28        margin: 5px;
29  }
30}
31
32/*IE11*/
33@media all and (-ms-high-contrast:none) {
34       *::-ms-backdrop, ul.grid_area li {
35    margin: 5px;
36  }
37}
38
39/*EDGE*/
40_:-ms-lang(x), _::-webkit-meter-bar,ul.grid_area li {
41  margin: 5px;
42}
43
44ul.grid_area li:nth-child(1) {
45  grid-column: 1;
46  -ms-grid-column: 1;
47  grid-row: 1;
48  -ms-grid-row: 1;
49}
50ul.grid_area li:nth-child(2) { 
51  grid-column: 2;
52  -ms-grid-column: 2;
53  grid-row: 1;
54  -ms-grid-row: 1;
55}
56ul.grid_area li:nth-child(3) {
57  grid-column: 3/5;
58  -ms-grid-column: 3;
59  -ms-grid-row-span:2;
60  grid-row: 1/3;
61  -ms-grid-row: 1;
62  -ms-grid-column-span:2;
63}
64ul.grid_area li:nth-child(4) {
65  grid-column: 5;
66  -ms-grid-column: 5;
67  grid-row: 1;
68  -ms-grid-row: 1;
69}
70ul.grid_area li:nth-child(5) {
71  grid-column: 6;
72  -ms-grid-column: 6;
73  grid-row: 1;
74  -ms-grid-row: 1;
75
76}
77ul.grid_area li:nth-child(6) {
78  grid-column: 1/3;
79  -ms-grid-column: 1;
80  -ms-grid-column-span:2;
81  grid-row: 2/4;
82  -ms-grid-row: 2;
83  -ms-grid-row-span:2;
84}
85ul.grid_area li:nth-child(7) {
86  grid-column: 3;
87  -ms-grid-column: 3;
88  grid-row: 3;
89  -ms-grid-row: 3;
90}
91ul.grid_area li:nth-child(8) {
92  grid-column: 4;
93  -ms-grid-column: 4;
94  grid-row: 3;
95  -ms-grid-row: 3;
96}
97ul.grid_area li:nth-child(9) {
98  grid-column: 5/7;
99  -ms-grid-column: 5;
100  -ms-grid-row-span:2;
101  grid-row: 2 / 4;
102  -ms-grid-row: 2;
103  -ms-grid-column-span:2;
104}