vue grid布局

Vue中可以使用第三方库如Bootstrap或Element UI来实现Grid布局，也可以使用CSS的Grid布局来实现。

使用Element UI的Grid布局，需要在Vue项目中引入Element UI，并在组件中使用el-row和el-col标签来实现。例如：

<template>
  <el-row>
    <el-col :span="12">col-12</el-col>
    <el-col :span="12">col-12</el-col>
  </el-row>
</template>

使用CSS的Grid布局，可以在组件的样式中定义网格布局。例如：

<template>
  <div class="grid-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
</template>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.item {
  background-color: #fff;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>