VueJS动态列表渲染问题：如何实现每行最多4个元素的水平布局

问题原因 #

你当前的代码将所有卡片放在单个column容器内，该容器为块级元素，导致卡片只能垂直排列。要实现每行最多4个的水平布局，可通过以下几种方案修改：

方案1：利用Bulma框架特性（推荐，保持原有框架风格） #

Bulma的columns组件支持自动换行，只需将循环移到column上，并添加is-multiline类实现换行，同时用is-3类设置每个列占12格中的3份（刚好每行4个）：

<div class="container" style="padding-top: 1rem; width: 100%; min-height: 600px">
  <div class="columns is-multiline">
    <div class="column is-3" v-for="(image, index) in allImagesData" :key="index">
      <div class="card" style="width: 15rem; height: 15rem; margin: 20px">
        <img class="card-img-top" :src='image.media_url' alt="Image" style="max-height: 12rem; max-width: 10rem;">
        <p>{{ image.platform }}</p>
        <p>{{ image.count }}</p>
      </div>
    </div>
  </div>
</div>

• is-multiline：允许columns容器内的列自动换行
• is-3：每个列占容器宽度的1/4（12格系统中3格对应4列每行）

方案2：自定义Flexbox布局（无需依赖框架） #

通过CSS Flexbox实现弹性布局，让卡片自动换行并保持每行最多4个：

<div class="container" style="padding-top: 1rem; width: 100%; min-height: 600px">
  <div style="display: flex; flex-wrap: wrap; gap: 20px;">
    <div class="card" style="flex: 0 0 calc(25% - 20px); height: 15rem;" v-for="(image, index) in allImagesData" :key="index">
      <img class="card-img-top" :src='image.media_url' alt="Image" style="max-height: 12rem; max-width: 10rem;">
      <p>{{ image.platform }}</p>
      <p>{{ image.count }}</p>
    </div>
  </div>
</div>

• display: flex：开启弹性布局
• flex-wrap: wrap：元素超出容器宽度时自动换行
• flex: 0 0 calc(25% - 20px)：固定每个卡片宽度为容器的1/4，减去gap的间距避免溢出

方案3：CSS Grid布局（响应式更灵活） #

用Grid布局实现自动填充的响应式排列，可根据屏幕宽度自动调整列数，同时保证每行最多4个：

<div class="container" style="padding-top: 1rem; width: 100%; min-height: 600px">
  <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 20px;">
    <div class="card" style="height: 15rem;" v-for="(image, index) in allImagesData" :key="index">
      <img class="card-img-top" :src='image.media_url' alt="Image" style="max-height: 12rem; max-width: 10rem;">
      <p>{{ image.platform }}</p>
      <p>{{ image.count }}</p>
    </div>
  </div>
</div>

• grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr))：自动填充列，每列最小宽度15rem，剩余空间平分，宽屏时每行4个，窄屏时自动减少列数

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