vue实现一个简单的栅格组件

<template>
  <div class="grid-container">
    <div v-for="item in items" :key="item.id" :class="getGridColumnClass(item)">
      {{ item.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, content: 'Grid Item 1', width: 2 },
        { id: 2, content: 'Grid Item 2', width: 4 },
        { id: 3, content: 'Grid Item 3', width: 6 },
        { id: 4, content: 'Grid Item 4', width: 8 }
      ]
    };
  },
  methods: {
    getGridColumnClass(item) {
      return `col-${item.width}`;
    }
  }
};
</script>

<style>
.grid-container {
  display: flex;
  flex-wrap: wrap;
}

.grid-container > div {
  border: 1px solid #ccc;
  padding: 10px;
}

.col-2 {
  width: calc(100% / 6 * 2);
}

.col-4 {
  width: calc(100% / 6 * 4);
}

.col-6 {
  width: calc(100% / 6 * 6);
}

.col-8 {
  width: calc(100% / 6 * 8);
}
</style>