如何循环渲染Div卡片组件N次并实现每行显示4张卡片的布局？

首先修正2处现有代码的错误：

• 组件拼写错误：script中定义的组件名HelloWordCard拼写错误，需和类名统一为HelloWorldCard
• HTML语法错误：卡片div的class属性未闭合，原代码<div class="Hellocard cardwithlink style="height: 170px;">需改为<div class="Hellocard cardwithlink" style="height: 170px;">

实现步骤如下：

1. 父组件中引入卡片组件，定义100条卡片数据，示例代码：

// 父组件script部分
import HelloWorldCard from './HelloWorldCard.vue'
export default {
  components: { HelloWorldCard },
  data() {
    return {
      // 生成100条测试数据，有真实业务数据时替换为实际接口返回值即可
      cardList: Array.from({length: 100}, (_, index) => ({
        id: index + 1,
        title: `卡片标题${index + 1}`,
        description: `卡片描述内容${index + 1}`
      }))
    }
  }
}

2. 父组件模板中用v-for指令循环渲染卡片，所有卡片放在同一个外层容器中，不要每个卡片单独套row：

<!-- 父组件template部分 -->
<div class="card-container">
  <HelloWorldCard 
    v-for="item in cardList" 
    :key="item.id"
    :title="item.title"
    :description="item.description"
  />
</div>

你当前每行仅显示1张的核心原因是：每张卡片单独套了一层row容器，row默认占100%宽度，导致每张卡片单独占一行。只需把所有卡片放到同一个外层容器，再添加对应CSS即可：

方案1：CSS Grid实现（推荐，代码最简洁） #

给卡片外层容器加如下样式：

.card-container {
  display: grid;
  /* 每行4列，宽度自动均分 */
  grid-template-columns: repeat(4, 1fr);
  /* 卡片横向和纵向间距，可自行调整 */
  gap: 16px;
}

/* 如需响应式适配，可添加媒体查询 */
@media (max-width: 768px) {
  .card-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .card-container {
    grid-template-columns: 1fr;
  }
}

方案2：Flex布局实现 #

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.Hellocard {
  /* 4列宽度减去间距占比，数值可按需调整 */
  width: calc(25% - 12px);
}

如果你的项目使用了Bootstrap框架，只需给每张卡片加col-3类即可实现每行4张的效果，无需额外写CSS。

内容的提问来源于stack exchange，提问作者user16675052