grid网格布局

    <div class="staging-wrap">
      <Station />
      <Status />
      <Manage />
      <Project class="border-l border-[#4B5C71]" />
      <Fusion class="border-t border-[#4B5C71]" />
      <!-- <Internet class="border-t border-l border-[#4B5C71]" /> -->
      <Alerts class="border-t border-l border-[#4B5C71]" />
      <Notice class="border-l border-[#4B5C71]" />
      <AlarmTrend class="border-t border-[#4B5C71]" />
      <QuickAccess class="border-l border-[#4B5C71]" />
    </div>

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;表示每列占比相同；

grid-template-rows: repeat(3, 33%); 3行，每行占33%；

组件里面class为staging-item-wrap:总共8个子元素，分别设置元素的分布开始和结束列

<style lang="scss" scoped>
.staging-wrap {
  width: 100%;
  height: 100%;
  padding: 18px;
  padding-right: 0;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: repeat(3, 33%);

  .staging-item-wrap {
    &:nth-of-type(1) {
      grid-column-start: 1;
      grid-column-end: 3;
    }
    &:nth-of-type(2) {
      grid-column-start: 3;
      grid-column-end: 5;
    }
    &:nth-of-type(3) {
      grid-column-start: 5;
      grid-column-end: 7;
    }
    &:nth-of-type(4) {
      grid-column-start: 7;
      grid-column-end: 9;
    }
    &:nth-of-type(5) {
      grid-column-start: 1;
      grid-column-end: 4;
    }
    &:nth-of-type(6) {
      grid-column-start: 4;
      grid-column-end: 7;
    }
    &:nth-of-type(7) {
      grid-column-start: 7;
      grid-column-end: 9;
    }
    &:nth-of-type(8) {
      grid-column-start: 1;
      grid-column-end: 7;
    }
    &:nth-of-type(9) {
      grid-column-start: 7;
      grid-column-end: 9;
    }
  }
}
</style>