grid布局

0、相关知识：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

1、样式

.ice-page {
    display: grid;
    grid-template-columns: 4rem auto;
}

.ice-container {
    display: grid;
    grid-template-rows: 4rem auto 4rem;
}

2、html代码

<div class="ice-page w-full h-full">
  <div class="bg-red-500"></div>
  <div class="ice-container bg-green-500">
    <div class="bg-blue-500"></div>
    <div class="bg-green-500">
      <router-outlet></router-outlet>
    </div>
    <div class="bg-blue-500"></div>
  </div>
</div>