'How to display 4 column in a row with component in Element UI

I have a Card component and I want to display 4 of them in one row.

<template>
  <el-container>
    <el-main>
      <el-row>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="4">
          <Card class="grid-content" />
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

So I created this view but it doesnt display right. It display 1 row in 1 column. So how can I display something like this?

<Card/><Card/><Card/><Card/>
<Card/><Card/><Card/><Card/>
<Card/><Card/><Card/><Card/>
<Card/><Card/><Card/><Card/>
vue.jsvuexvuejs3element-ui


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions