使用grid布局实现页面布局切换

实现效果如图

1、一行四块布局

2、切换一行两块布局

实现vue的组件如下

<template>
  <div class="test">
    <div class="button-block">
      <el-radio-group v-model="radio" size="large">
        <el-radio-button label="1">
          <span class="iconfont icon-shuang"></span
        ></el-radio-button>
        <el-radio-button label="2">
          <span class="iconfont icon-san"></span
        ></el-radio-button>
      </el-radio-group>
    </div>
    <div class="content" :class="{ grid2: radio == '1', grid4: radio == '2' }">
      <div class="block" v-for="index in 8" :key="index"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return { radio: "1", list: 8 };
  },
  watch: {
    radio(val) {
      console.log(val);
    },
  },
};
</script>
<style lang="scss" scoped>
.test {
  .button-block {
    text-align: center;
  }
  .content {
    margin-top: 20px;
    display: grid;
    grid-gap: 16px;
    .block {
      // 若切换失效，尝试添加min-width属性
      // min-width: 200px;
      height: 100px;
      background-color: #f82a42;
      border-radius: 8px;
    }
  }
}
.grid2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid4 {
  grid-template-columns: repeat(4, 1fr);
}
</style>

可能出现问题

在实际项目使用中，遇到切换时布局错乱不生效，后面给下面的div加了最小宽度属性 min-width 
后切换正常