Autoprefixerでcssを自動変換してもレイアウト崩れてしまいます。

タイトル通りですが、grid使ってレイアウトしたのですがIE11ですごく崩れており、時間の関係で変換サイトにベンダープレフィックスを付けたのですが、他のブラウザみたいに綺麗に表示されません。


  <main>
    <h1><span>ABC
                        </span></h1>
    <div class="grid">
      <div class="summaryBox">
        <figure> <img src="images/abc.jpg" alt=""> </figure>
      </div>
      <section class="list">
        <h2>abcK</h2>
        <ul>
          <li class="redBg">abc</li>
        </ul>
        <ul>
          <li class="red-money">179,800<span class="red-money1">a</span><span class="red-money2">a</span></li>
          <li class="redBg2">abc</li>
        </ul>
        <p>166,482</p>
      </section>
      <section class="speclist">
        <h2>SPEC</h2>
        <div class="subspec">
          <ul class="specname">
            <li>OS</li>
            <li>OS</li>
  
          </ul>
          <ul>
            <li>OS</li>
            <li>OS</li>
   
          </ul>
        </div>
        <p>詳しく見る</p>
      </section>
    </div>
    <section class="limit">
      <div class="limit-text"><span class="safter">abc</span>
        <p><span class="subtext">ac</p>
      </div>
      <div class="limit-text2"><span class="safter2">abc</span>
        <p><span class="subtext">ac</p>
      </div>
    </section>

    <section class="border">
      <div class="more">もっと見る</div>
      <div class="content">
        <div id="Gup" class="grid">
          <div class="summaryBox GupsummaryBox">
            <figure> <img src="images/abc" alt=""> </figure>
          </div>

          <section class="list">
            <div class="centerBox">
            <h2>ac</h2>
            <ul class="optionlist">
              <li class="redBg redBgSub">ac</li>
            </ul>
            <ul class="optionlist">
              <li class="red-money">179,800<span class="red-money1">a</span><span class="red-money2">a</span></li>
              <li class="redBg2">a</li>
            </ul>
            <p>166,482円</p>
          </div><!--centerBox-->
          </section>
          <section class="speclist">
            <h2>SPEC</h2>
            <div class="subspec">
              <ul class="specname2">
                <li>OS</li>
                <li>CPU</li> 
              </ul>
              <ul>
                <li>OS</li>
                <li>CPU</li>
              </ul>
            </div>
            <p>詳しく見る</p>
          </section>
        </div>
  </main>

@charset "utf-8";

main{
    width:100%;
    display: block;
}

 h1{
    margin: 5.5rem 2rem 0 2rem;
    padding: 1.8rem 0 1.8rem 0;
    font-size: 1.8rem;
    font-weight: bold;
    border-top: 0.1rem solid #CCC;
    border-bottom: 0.1rem solid #CCC;
    text-align: justify;
    text-justify: inter-ideograph;
}

h1 span{
  letter-spacing: -0.15rem;
}

h1 br{
  display: none;
}

.grid {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr 0fr 1fr;
    margin: 1.5rem;
    }


.summaryBox {
    grid-row:auto;
    grid-column: span 2;
    background: #fcc;

  }

  .summaryBox img{
    width:100%;
   }

  .list,.speclist{
    padding-left: 3%;
    border-left: 0.1rem solid #CCC;
  }

  .list ul:nth-child(3n) {
    padding: 0;
}

  .list h2{
    font-size: 1.4rem;
    font-weight: bold;
    padding: 0 0 5% 0;
    line-height: 100%;
  }

  .list h2:after {
    clear: both;
    content: “”;
    display: block;
    height: 0;
}

.list p{
  padding-bottom: 2%;
  font-size: 1.2rem;
  font-family: "Open Sans", sans-serif;
}


.centerBox{
  width:100%;
  max-width: 400px;
  margin:auto;
}


.blueBg{
  width:100%;
  max-width:300px;
  background:#ffc;
    color: #fff;    
    padding: 1%;
    margin-bottom: 2%;
    text-align: center;
    font-size: 1.3rem;
    font-weight: bold;
    box-shadow: 0px 1.5px #bdbdbd;
}

  .redBg{
    width:100%;
    max-width:300px;
    background:#ffc;
    color: #fff;    
    padding: 1%;
    margin-bottom: 2%;
    text-align: center;
    font-size: 1.3rem;
    font-weight: bold;
    box-shadow: 0px 1.5px #bdbdbd;
  }

  .red-money{
    font-family: "Open Sans", sans-serif;
    font-size: 3.8rem;
    font-weight: bold;
    color: #ec2424;
  }

  span.red-money1{
    font-family: monospace;
    font-size: 2rem;
    font-weight: bold;
    color: rgb(0, 0, 0);

  }

  span.red-money2{
    font-family: monospace;
    font-size: 1rem;
    font-weight: bold;
    color: rgb(0, 0, 0);
    letter-spacing: -0.1em

  }

  .redBg2{
    width: 100%;
    max-width: 150px;
    position:relative;
    font-size: 1.4rem;
    padding:0 0 0 5%;
    background: #ec2424;
    color: #fff;
    font-weight: bold;
  }

  .redBg2:before{
    position: absolute;
    content: '';
    left: 0px;
    top: -3px;
    width: 0;
    height: 0;
    border: none;
    border-left: 0;
    border-bottom:0;
    z-index: 2;

  }
  

  
  .speclist{
    letter-spacing: -0.1em;
    border-top: 0.1rem solid #CCC;
    grid-column-start: 1;
    grid-column-end: 4;
    padding-top: 2%;
    /*padding-bottom: 2%; */
    font-size: 1.2rem;
    line-height : 150%;
  }

  .speclist h2{
    padding-bottom: 2%;  
    font-family: "Open Sans", sans-serif;
    font-size: 1.4rem;
    letter-spacing: 0.1rem;
    color: #c6c6c6;
  }

  .speclist p{
    padding: 2% 0 0 0;
    font-size: 1.4rem;
    color: #1c70c4;
  }

  .subspec{
    display: flex;
    font-weight: bold;
    font-size: 1rem;
  }

  .subspec .specname{
  width: 15%;
  }

  .limit{
    position: relative;
    padding:1% 0 0 0;
  }

  .limit div{
    display: flex;
    padding: 2%;
    margin-bottom: 0.5rem;
    background: #d8ecf3;
  }

  .limit div span{
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
  color:#ee5455;
  }

  .limit-text .safter:after{
    content: "1";
    position: absolute;
    margin: 0 -50px 0 50px;
    padding: 0 0 0 6px;
    background: #fff;
    /* top: 50%; */
    /* margin-top: -55px; */
    height: 22px;
    width: 22px;
    border-radius: 50%;
    font-weight: bold;
    }

    .limit-text2 .safter2:after {
      content: "2";
      position: absolute;
      margin: 0 -50px 0 50px;
      padding: 0 0 0 6px;
      background: #fff;
      /* top: 50%; */
    /* margin-top: -55px; */
      height: 22px;
      width: 22px;
      border-radius: 50%;
      font-weight: bold;
      }

      .limit-text p,.limit-text2 p{
        margin: auto 55px;
        font-size: 1.8rem;
      }

      .limit div .subtext{
        font-size: 1.57rem;
        display: block;
        font-weight: bold;
      }


      section.border{
        border: 0.1rem solid #ec8224;
      }

      .more {
        background: url(../images/up.png) no-repeat;
        background-size: contain;
        color: #fff;
        width: 100%;
        max-width: 400px;
        text-align: center;
        padding: 30px;
        cursor: pointer;
        text-indent:100%;
white-space:nowrap;
overflow:hidden;
    }

    #Gup,.Gup{
    display: grid;
    grid-gap: 10px;
    margin: 2% 0 2% 0;
     grid-template-columns: 1fr 2fr 1fr;
  }

  .GupsummaryBox {
    grid-row: auto;
    grid-column: span 2;
    background: #fcc;
}

#summaryBox img {
  width: 100%;
}


article.option p{
  padding: 1%;
  text-align: center;
  background: #f2f2f2;
  font-size: 2.4rem;
  color: #4a4a4a;
}

.subspec .specname2 {
  width: auto;
}


.list2{
  text-align: center;
}


.optionlist{
  display: flex;
  /* align-items: center; */
  justify-content: center;
}

.redBgSub{
  font-size: 2.5rem;
}

.flexbox {
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);



  }
.item {
	justify-content: space-between;
}

p.title {
font-size: 1.2re;
  }

/* PC(640px以上に適用) */
/* 640px以上*/
@media screen and (min-width:640px) {
    main{
    width:100%;
    max-width:1080px;
    margin: auto;
}

h1{
  margin: 6rem 0 2.5rem 0;
}

h1 span{
  display: block;
  width: 100%;
  max-width: 730px;
  margin: auto;
  text-align: center;
  letter-spacing: normal;
}

h1 br {
  display:block;
}

    .grid {
        margin: 0;
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: 1fr 0fr 2fr;
        }
    
    .summaryBox {
        grid-row: span 2;
        grid-column: span 2;
      }

      .summaryBox img{
        width:100%;
       }

       .redBg{
        font-size:2.4rem;
       }

       .list h2{
        padding-bottom: 2%;
        line-height:normal;
      }

      .list ul{
        padding-bottom: 2%;
      }

      .redBg2{
        width:auto ;
        max-width:none;
        position:relative;
        font-size: 1.8rem;
        padding: 0.5rem 1% 0 3%;
        background: #ec2424;
        color: #fff;
      }

      .redBg2:before{
        position: absolute;
        content: '';
        left: 0px;
        top: -3px;
        width: 0;
        height: 0;
        border: none;
        border-left: solid 15px #fafcfc;
        border-bottom: solid 60px transparent;
        z-index: 2;
      }
  
       .list ul{
        flex-basis: 300px;
      }

      .list ul{
        display: flex;

      }

      .speclist{
        width: 100%;
        background: aliceblue;
        grid-column-start:auto;
        grid-column-end:auto;
      }

      .GupsummaryBox {
        grid-row: auto;
        grid-column: span 1;
    }


    .redBgSub{
      font-size: 2rem;
    }

    .redBgSub2{
      font-size: 1.8rem;
    }

    }