CSS グリッドについての質問です。
画像を下記のように並べたいのですが
IEだとこのようになってしまいます。
レスポンシブで縦一列になるようにしているので、画像はレイアウトで指定しているサイズより大きいです。
html
1 <div class="container"> 2 <img class="g-img-1" src="./img/01.jpg"> 3 <img class="g-img-2" src="./img/02.jpg"> 4 <img class="g-img-3" src="./img/03.jpg"> 5 </div>
sass
1 .container { 2 display: grid; 3 grid-template-columns: repeat(390px 1fr); 4 grid-template-rows: repeat(225px 1fr); 5 grid-gap: 20px; 6 justify-content: center; 7 grid-template-areas: 8 "img-1 img-2" 9 "img-1 img-3"; 10 margin-bottom: 5%; 11 12 img{ 13 margin-bottom: initial; 14 } 15 16 .g-img-1 { 17 grid-area: img-1; 18 } 19 20 .g-img-2 { 21 grid-area: img-2; 22 } 23 24 .g-img-3 { 25 grid-area: img-3; 26 } 27 }
css
1article section .container { 2 -ms-flex-pack: center; 3 -webkit-box-pack: center; 4 display: -ms-grid; 5 display: grid; 6 grid-gap: 20px; 7 grid-template-areas: "img-1 img-2""img-1 img-3"; 8 grid-template-columns: repeat(390px 1fr); 9 grid-template-rows: repeat(225px 1fr); 10 justify-content: center; 11 margin-bottom: 5% 12} 13 14article section .container img { 15 margin-bottom: 0 16} 17 18article section .container .g-img-1 { 19 -ms-grid-column: 1; 20 -ms-grid-row: 1; 21 -ms-grid-row-span: 3; 22 grid-area: img-1 23} 24 25article section .container .g-img-2 { 26 -ms-grid-column: 3; 27 -ms-grid-row: 1; 28 grid-area: img-2 29} 30 31article section .container .g-img-3 { 32 -ms-grid-column: 3; 33 -ms-grid-row: 3; 34 grid-area: img-3 35} 36 37@media screen and (max-width:767px) { 38 article { 39 padding: 5% 40 }
どのようにしたらIEで1枚目の写真のように画像を並べることができるでしょうか?
お力をかしてください。
よろしくお願いいたします。