GRID布局，打印时样式会丢失

[privatenine]

<div id="printBox">
  <div class="zy-bg-white" style="padding: 20px;">
    <div class="f24 text-center mb20">title</div>
    <div class="container">
      <div class="headerLabel1 flex-center">
        <span>headerLabel1 </span>
      </div>
      <div class="headerForm1 flex-vertical-center">
        <span>headerForm1</span>
      </div>
      <div class="headerLabel2 flex-center">
        <span>headerLabel2 </span>
      </div>
      <div class="headerForm2 flex-vertical-center">
        <span>headerForm2</span>
      </div>
      <div class="aside text-center">
        <span>aside </span>
      </div>
      <div class="main">main</div>
      <!-- <div class="footer">footer</div> -->
    </div>
  </div>
</div>

.container{ border:1px solid #000; display:grid; grid:40px 40px 200px repeat(11, 30px) 300px /40px auto auto auto auto; align-content:center; & > div { align-self: center; border: 1px solid #000; height: 100%; } } .headerLabel1{ grid-column:1/3; grid-row:1/2; } .headerForm1{ grid-column:3/6; grid-row:1/2; } .headerLabel2{ grid-column:1/3; grid-row:2/3; } .headerForm2{ grid-column:3/6; grid-row:2/3; } .main{ grid-column:2/6; grid-row:3/4; } .aside{ grid-column:1/2; grid-row:3/16; background:yellow; align-self:stretch!important; font-size: 20px; line-height: 40px; justify-self: center; } .footer{ grid-column:2/4; grid-row:3/4; background:grey; }