九宫格视频监控Vue前端界面布局？

Question

怎么用Vue 实现这个九宫格监控视频

Answer 1

<div v-for="div in 3">
    <video v-for="video in 3"></video>
</div>

<style>
    div{display:flex;}
    video{flex: 1 0 33%;}
</style>

flex 布局呗

Answer 2

<template>
  <div class="home">
    <div class="box" v-for="(item, index) of 9" :key="index">box{{ index + 1 }}</div>
  </div>
</template>

<style lang="less" scoped>
.home {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 200px 200px 200px;

  div {
    line-height: 200px;
    border: 1px solid rgb(238, 116, 116);
    color: #fff;
  }
}
</style>

grid布局也不错

Answer 3

网格布局

<el-row>
  <el-col :span="8"></el-col>
  <el-col :span="8"></el-col>
  <el-col :span="8"></el-col>
</el-row>
<el-row>
  <el-col :span="8"></el-col>
  <el-col :span="8"></el-col>
  <el-col :span="8"></el-col>
</el-row><el-row>
  <el-col :span="8"></el-col>
  <el-col :span="8"></el-col>
  <el-col :span="8"></el-col>
</el-row>