本文介绍如何在 Vue.js 中摒弃语义不符的传统 ，改用 CSS Grid 实现灵活、响应式的固定列数布局（如每行 3 列），自动按顺序填充数据，完美适配任意长度的数据列表。

本文介绍如何在 vue.js 中摒弃语义不符的传统 `

`，改用 CSS Grid 实现灵活、响应式的固定列数布局（如每行 3 列），自动按顺序填充数据，完美适配任意长度的数据列表。

在 Vue.js 开发中，当需要将一维数据列表（如商品、卡片、项目）以“固定列数、自动换行”的方式呈现时，许多开发者会下意识沿用 <table> 结构。但需明确：<strong>表格（<code><table>）专为二维关系型数据设计（行列均有明确语义）；而单维度列表按固定列平铺属于展示布局问题，非语义化表格场景。强行用 <code><tr>/<code><td> 实现会导致结构僵硬、响应式困难、可访问性下降，且难以动态控制列数。<p>✅ 推荐方案：<strong>CSS Grid + 语义化容器（如 <code><ul></ul>/<div>）<p>CSS Grid 提供了原生、声明式的列控制能力，无需手动计算索引或拆分数组。只需定义 <code>grid-template-columns，浏览器即自动按指定列数排列子元素，剩余项自然换行——完全响应式、零 JS 逻辑、高度可维护。

以下是一个生产就绪的 Vue 3（Composition API）示例，实现每行固定 3 列的商品卡片布局：

@@######@@

? 关键优势说明：

jm-jsjkxyjs02-pzl-803

查询全球任意城市的实时天气和未来天气预报

下载

• 零逻辑计算：无需 v-for 嵌套、无需 Math.floor(index / 3) 或 slice() 分组，Grid 自动处理；
• 真正响应式：仅需一行 CSS 即可适配不同屏幕（例如 @media (max-width: 768px) { grid-template-columns: 1fr; } 变为单列）；
• 语义清晰：用 <article></article> 表达独立内容单元，符合 HTML5 语义标准，提升 SEO 与无障碍支持；
• 样式解耦：列数、间距、悬停效果全部由 CSS 控制，组件逻辑专注数据，职责分离。

⚠️ 注意事项：

• 避免在 Grid 容器内使用 float、inline-block 等旧式布局属性，它们会破坏 Grid 流；
• 若需支持 IE11，请改用 display: flex + flex-wrap: wrap 并配合 flex-basis 计算（但强烈建议放弃 IE11）；
• 对于超大数据集（>1000 项），可结合虚拟滚动（如 vue-virtual-scroller）优化性能。

总结：用语义正确的结构（<article></article>/<ul></ul>）搭配现代 CSS（Grid/Flexbox），是 Vue 应用中实现“固定列数自动布局”的最佳实践。它更简洁、更健壮、更易扩展，也更符合 Web 标准演进方向。

<script setup>
import { ref } from 'vue'

const items = ref([
  { id: 1, name: "Item 1", price: 10.99 },
  { id: 2, name: "Item 2", price: 20.50 },
  { id: 3, name: "Item 3", price: 15.75 },
  { id: 4, name: "Item 4", price: 15.75 },
  { id: 5, name: "Item 5", price: 25.00 },
  { id: 6, name: "Item 6", price: 18.99 }
])
</script><template><div class="items-grid">
    <article v-for="item in items" :key="item.id" class="item-card"><header class="item-header"><span class="item-id">ID: {{ item.id }}</span>
        <h3 class="item-name">{{ item.name }}</h3>
      </header><footer class="item-footer"><span class="item-price">${{ item.price.toFixed(2) }}</span>
      </footer></article>
</div>
</template><style scoped>
.items-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 固定 3 列，等宽 */
  gap: 1.25rem; /* 列与行间距 */
  padding: 0.75rem;
}

.item-card {
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: box-shadow 0.2s;
}

.item-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.item-header {
  padding: 1rem 0.75rem 0.5rem;
  border-bottom: 1px solid #f5f5f5;
}

.item-id {
  font-size: 0.85rem;
  color: #666;
  font-weight: 500;
}

.item-name {
  margin: 0.25rem 0 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
}

.item-footer {
  padding: 0.5rem 0.75rem 0.75rem;
  text-align: center;
}

.item-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: #2c7a3d;
}
</style>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！