vue grid

<template>
  <div class="grid-container">
    <div v-for="(item, index) in items" :key="index" class="grid-item">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
    };
  }
};
</script>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}
</style>

解释说明

1. 模板部分 (<template>):

   • 使用 v-for 指令遍历 items 数组，并为每个元素创建一个 div，赋予唯一的 key 属性以提高渲染性能。
   • 每个 div 都有一个类名为 grid-item，用于样式定义。

2. 脚本部分 (<script>):

   • 定义了一个 Vue 组件，其中 data 函数返回一个包含 items 数组的对象。这个数组包含了要显示在网格中的项。

3. 样式部分 (<style>):

   • .grid-container 类使用 CSS Grid 布局，定义了三列等宽的网格，并设置了列之间的间距（gap）。
   • .grid-item 类定义了每个网格项的样式，包括背景颜色、内边距和文本对齐方式。

这样，通过结合 Vue 的数据绑定和 CSS Grid 布局，可以轻松创建一个响应式的网格布局。