The layout problem of controlling cards based on the combination of vmurforforellicrow and el-col

use the component card provided by element-ui to display goods. After getting all the goods at the front end, all the goods are displayed by card external v-for loop output.
wants to display four items in one line, but I don"t know how to control the final effect of el-row, and el-col,. There is no gap between each line, and it feels that all products are still displayed on one line, but the display line is changed because there is not enough width. How to solve the above problems?
1. The code is as follows

            <el-row>
                <el-col :span="4" v-for="project in allprojects" :key="project.pid" :offset="1">
                    <el-card :body-style="{ padding: "0px", height:"360px"}" shadow="hover" style="width: 260px;height: 320px;">
                        <div style="padding: 6px;height: 310px;">
                            <div>
                                <div><font size="5">{{project.pcname}}</font></div>
                                <div style="position: relative;top: 15px;text-align: center;">{{project.pname}}</div>
                            </div>
                            <div style="position: relative;top: 30px;">
                                <img src="../images/project/prohead.jpg" class="image">
                                <div style="position: relative;top: 10px;left: 66px;"><i class="el-icon-time"></i>{{project.pdatesave}}</div>
                            </div>
                            <div style="position: relative;top: 45px;">
                                <i class="el-icon-view"></i><span>{{project.ppageview}}</span>
                                <el-button type="text"><font size="4"></font></el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            

2. The effect is as follows:

clipboard.png

Mar.02,2021

1. First calculate the number of rows of data in computed

computed: {
    pages () {
      const pages = []
      this.allprojects.forEach((item, index) => {
        const page = Math.floor(index / 4)//44
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    }
  }

2. In the two-dimensional array that has just been calculated in the page loop, el-row starts the loop:

  <el-row v-for="(page, index) of pages" :key="index" >
    <el-col :span="4" v-for="(item, innerindex) of page" :key="item.projectId" :offset="innerindex > 0 ? 2 : 1">
     //code...
    </el-col>
  </el-row>

do you understand?


A slight change has been made according to what you have provided (only one place has been changed and has been noted):

<!DOCTYPE html>
<html xmlns:border-radius="http://www.w3.org/1999/xhtml" xmlns:margin="http://www.w3.org/1999/xhtml"

xmlns:color="http://www.w3.org/1999/xhtml">
<head>

<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app" >
<div id="pro_form" style="position: relative;width: 100%;height: 1000px;">
    <div style="position: relative;top: 100px;left:130px;">
        <el-row>
            <!---->
            <el-col :span="4" v-for="(project,index) in allprojects" :key="index" :offset="1" style="margin-bottom:40px">
                <el-card :body-style="{ padding: '0px', height:'360px'}" shadow="hover" style="width: 260px;height: 320px;">
                    <div style="padding: 6px;height: 310px;">
                        <div>
                            <div><font size="5">{{project.pcname}}</font></div>
                            <div style="position: relative;top: 15px;text-align: center;">{{project.pname}}</div>
                        </div>
                        <div style="position: relative;top: 30px;">
                            <img src="../images/project/prohead.jpg" class="image">
                            <div style="position: relative;top: 10px;left: 66px;"><i class="el-icon-time"></i>{{project.pdatesave}}</div>
                        </div>
                        <div style="position: relative;top: 45px;">
                            <i class="el-icon-view"></i><span>{{project.ppageview}}</span>
                            <el-button type="text"><font size="4"></font></el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</div>
</div>
</body>
<style>

html,body{
    margin:0px;
    height:100%;
}
</style>
<script>

var vue=new Vue({
    el: '-sharpapp',
    data: {
        allprojects:[
            {
                pid:'123',
                pname:'pname',
                pcname:'pcname',
                pdatesave:'2018-4-9 11:11:11',
                ppageview:10
            },
            {
                pid:'123',
                pname:'pname',
                pcname:'pcname',
                pdatesave:'2018-4-9 11:11:11',
                ppageview:10
            },
            {
                pid:'123',
                pname:'pname',
                pcname:'pcname',
                pdatesave:'2018-4-9 11:11:11',
                ppageview:10
            },
            {
                pid:'123',
                pname:'pname',
                pcname:'pcname',
                pdatesave:'2018-4-9 11:11:11',
                ppageview:10
            },
            {
                pid:'123',
                pname:'pname',
                pcname:'pcname',
                pdatesave:'2018-4-9 11:11:11',
                ppageview:10
            },
            {
                pid:'123',
                pname:'pname',
                pcname:'pcname',
                pdatesave:'2018-4-9 11:11:11',
                ppageview:10
            }
        ]
    },
    methods: {//
    },
    computed: {//
    }
})
</script>
</html>

Note:
this is style written directly on el-col for convenience. You can also add corresponding styles

by selecting .el-col via CSS .
I hope my answer will be helpful to you!

I have the answer. Write the for loop in < el-col > solvable.

in fact, the for loop is written in row and col, and the DOM structure is completely different.
the former: there are several < el-row >, the number is equal to the number of cycles, and the content in each < el-row > is the same.
the latter: there are several < el-col > in 1 < el-row >, and the number is equal to the number of cycles.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1c21f03-32d30.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1c21f03-32d30.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?