elementui 自适应布局一行三个 超出换行

ElementUI 的栅格布局系统可以帮助我们实现自适应布局，并且可以很方便地控制每一列的宽度和间隔。

以下是一个示例代码，实现一行三个，并且超出后自动换行的布局：

<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" v-for="(item, index) in list" :key="index">
        <div class="item">{{ item }}</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        'Item 1',
        'Item 2',
        'Item 3',
        'Item 4',
        'Item 5',
        'Item 6'
      ]
    }
  }
}
</script>

<style scoped>
.item {
  background-color: #eee;
  height: 200px;
  text-align: center;
  line-height: 200px;
}
</style>

在上面的代码中，我们使用了 `el-row` 和 `el-col` 组件来实现布局。通过设置 `gutter` 属性可以控制列与列之间的间隔。

在 `el-col` 组件中，我们通过绑定不同屏幕尺寸下的列宽来实现自适应布局。例如，`xs` 表示在超小屏幕下（<768px），列宽占满整个屏幕；`sm` 表示在小屏幕下（≥768px），列宽占据父容器的一半；`md` 表示在中等屏幕下（≥992px），列宽占据父容器的三分之一；`lg` 和 `xl` 同理。

通过以上设置，我们可以实现一行三个，并且超出后自动换行的布局。