CSS中使用grid布局实现一套模板多种布局

<template>
  <div :class="['page-wrap', layoutClass]">
    <!--  布局一  -->
    <div class="wrap-layout1">
      <play-component :loading="loading" :program-info="programsInfo.area1" />
    </div>
    <!--  布局二  -->
    <div class="wrap-layout2">
      <play-component :loading="loading" :program-info="programsInfo.area2" />
    </div>
    <!--  布局三  -->
    <div class="wrap-layout3">
      <play-component :loading="loading" :program-info="programsInfo.area3" />
    </div>
    <!--  布局四  -->
    <div class="wrap-layout4">
      <play-component :loading="loading" :program-info="programsInfo.area4" />
    </div>
  </div>
</template>

.page-wrap {
  //width: 1920px;
  //height: 1080px;
  width: 100%;
  height: 100%;
  display: grid;
  grid-gap: 1px 1px;
  grid-template-columns: repeat(12, 8.333333%);
  grid-template-rows: repeat(12, 8.333333%);
  position: relative;
  background: #FFFFFF;
}
.wrap-layout1,
.wrap-layout2,
.wrap-layout3,
.wrap-layout4 {
  background: #D8D8D8;
}

// 默认布局
.layout-default {
  .wrap-layout1 {
    grid-column: 1 / 13;
    grid-row: 1 / 13;
  }
  .wrap-layout2,
  .wrap-layout3,
  .wrap-layout4 {
    display: none;
  }
}

// 布局一
.layout1 {
  .wrap-layout1 {
    grid-column: 1 / 9;
    grid-row: 1 / 13;
  }
  .wrap-layout2 {
    grid-column: 9 / 13;
    grid-row: 1 / 5;
  }
  .wrap-layout3 {
    grid-column: 9 / 13;
    grid-row: 5 / 9;
  }
  .wrap-layout4 {
    grid-column: 9 / 13;
    grid-row: 9 / 13;
  }
}

// 布局二
.layout2 {
  .wrap-layout1 {
    grid-column: 1 / 3;
    grid-row: 1 / 13;
  }
  .wrap-layout2 {
    grid-column: 3 / 11;
    grid-row: 1 / 13;
  }
  .wrap-layout3 {
    grid-column: 11 / 13;
    grid-row: 1 / 13;
  }
  .wrap-layout4 {
    display: none;
  }
}

// 布局三
.layout3 {
  .wrap-layout1 {
    grid-column: 1 / 13;
    grid-row: 1 / 3;
  }
  .wrap-layout2 {
    grid-column: 1 / 13;
    grid-row: 3 / 13;
  }
  .wrap-layout3 {
    display: none;
  }
  .wrap-layout4 {
    display: none;
  }
}

// 布局四
.layout4 {
  .wrap-layout1 {
    grid-column: 1 / 7;
    grid-row: 1 / 7;
  }
  .wrap-layout2 {
    grid-column: 7 / 13;
    grid-row: 1 / 7;
  }
  .wrap-layout3 {
    grid-column: 1 / 7;
    grid-row: 7 / 13;
  }
  .wrap-layout4 {
    grid-column: 7 / 13;
    grid-row: 7 / 13;
  }
}