如何修复vuejs中的网格问题

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, content: 'Item 1' },
        { id: 2, content: 'Item 2' },
        // ...更多项
      ]
    };
  }
};
</script>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}
</style>

<template>
  <div class="responsive-grid">
    <div v-for="item in responsiveItems" :key="item.id" class="grid-item">
      {{ item.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        // ...同上
      ]
    };
  },
  computed: {
    responsiveItems() {
      // 根据屏幕宽度返回不同的数据结构
      return this.items.map(item => ({
        ...item,
        width: window.innerWidth < 600 ? '100%' : '50%'
      }));
    }
  }
};
</script>

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

.grid-item {
  width: v-bind('item.width');
}
</style>

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, content: 'Item 1', visible: true },
        { id: 2, content: 'Item 2', visible: false },
        // ...更多项
      ]
    };
  }
};
</script>