グリッドレイアウト　paddingで％指定した行間がIE11で崩れる

display: grid;を使ってカラム表示、そして以下の<①chrome,safari,firefoxでの表示>
の図のようにboxごとにpadding-bottomを%指定して行間を空けたいのですが、現在、IEのみで崩れている状況です。

boxごとにpadding-bottom: 5.3%;をつけているのですが、IEだとpaddingがbox内で作られ、<②IEでの表示>の図のようにboxがつまってしまいます。
IE以外のブラウザでは問題なく表示されています。

HTML
1<div class="sample">
2　　　<div class="box box1">
3	box①
4     </div>
5     <div class="box box2">
6	box②
7　　　</div>
8     <div class="box box3">
9	box③
10     </div>
11     <div class="box box4">
12	box④
13     </div>
14     <div class="box box5">
15	box⑤
16     </div>
17     <div class="box box6">
18	box⑥
19     </div>
20     <div class="box box7">
21	box⑦
22     </div>
23     <div class="box box8">
24	box⑧
25     </div>
26     <div class="box box9">
27	box⑨
28     </div>
29　　</div>

CSS
1.sample {
2     display: grid;
3     display: -ms-grid;
4     grid-template-columns: 1fr 1fr;
5     grid-template-rows: auto auto;
6     margin-bottom: -5.3%;
7     grid-column-gap: 4%;
8     -ms-grid-columns: 1fr 4% 1fr;
9     -ms-grid-column-gap: 4%;
10     -ms-grid-rows: auto auto;
11   }
12   .box {
13     padding-bottom: 10.5%;
14   }
15 
16   .box1 {
17     -ms-grid-row: 1;
18     -ms-grid-column: 1;
19   }
20 
21   .box2 {
22     -ms-grid-row: 1;
23     -ms-grid-column: 3;
24   }
25 
26   .box3 {
27     -ms-grid-row: 2;
28     -ms-grid-column: 1;
29   }
30 
31   .box4 {
32     -ms-grid-row: 2;
33     -ms-grid-column: 3;
34   }
35 
36   .box5 {
37     -ms-grid-row: 3;
38     -ms-grid-column: 1;
39   }
40 
41   .box6 {
42     -ms-grid-row: 3;
43     -ms-grid-column: 3;
44   }
45 
46   .box7 {
47     -ms-grid-row: 4;
48     -ms-grid-column: 1;
49   }
50 
51   .box8 {
52     -ms-grid-row: 4;
53     -ms-grid-column: 3;
54   }
55 
56   .box9 {
57     -ms-grid-row: 5;
58     -ms-grid-column: 1;
59   }
60