如何实现3列Grid布局下不同数量Vue列表项的自适应对齐？

核心思路 #

借助CSS Grid布局的特性，结合少量样式（或Vue计算属性），就能轻松实现不同数量列表项的自适应排版，无需复杂的JS逻辑。

步骤1：调整HTML结构 #

将v-for渲染的卡片包裹在一个网格容器内：

<div class="workshops-grid">
  <article class="wCard" v-for="card in workshops" :key="card._id">
    <div class="wCard__content">
      <img class="wCard__icon" :src="$urlFor(card.icon.asset.url)" />
      <!-- 卡片其他内容 -->
    </div>
  </article>
</div>

步骤2：CSS实现（纯CSS方案） #

通过Grid定义3列布局，再针对不同数量的列表项做特殊处理：

/* 网格容器基础样式 */
.workshops-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
  gap: 24px; /* 自定义列/行间距，根据需求调整 */
}

/* 卡片基础样式（可选，让卡片占满列宽） */
.wCard {
  width: 100%;
  /* 其他卡片样式：背景、 padding、阴影等 */
}

/* 当列表项数量为7、10、13...（模3余1）时，最后一项居中 */
.workshops-grid > .wCard:nth-last-child(1):nth-child(3n + 1) {
  grid-column: 2; /* 强制放在第二列（中间列） */
}

步骤3：备选方案（Vue计算属性辅助） #

如果需要兼容不支持复杂CSS选择器的浏览器，可通过Vue计算属性动态给容器加类：

// 组件内的computed属性
computed: {
  gridModifierClass() {
    const itemCount = this.workshops.length;
    return itemCount % 3 === 1 ? 'last-item-center' : '';
  }
}

对应的HTML和CSS调整：

<div :class="['workshops-grid', gridModifierClass]">
  <!-- 卡片内容 -->
</div>

.last-item-center > .wCard:last-child {
  grid-column: 2;
}

效果验证 #

• 7个列表项：前6项分两行（每行3个），第7项单独在第三行中间列，左右保留和其他列一致的间距。
• 8个列表项：前6项占满两行，第7、8项自动填充第三行的前两列。
• 9个及以上列表项：自动按3列换行，填满所有网格位置。

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