当前位置：首页 > VUE

vue实现六宫格

2026-01-21 01:22:57VUE

vue实现六宫格布局

使用Vue实现六宫格布局可以通过多种方式完成，以下是几种常见的方法：

方法一：使用CSS Grid布局

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

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

.grid-item {
  background: #f0f0f0;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
</style>

方法二：使用Flexbox布局

<template>
  <div class="flex-container">
    <div v-for="(item, index) in 6" :key="index" class="flex-item">
      {{ index + 1 }}
    </div>
  </div>
</template>

<style>
.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
}

.flex-item {
  flex: 0 0 calc(33.333% - 10px);
  margin: 5px;
  background: #f0f0f0;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
</style>

方法三：使用Bootstrap栅格系统

<template>
  <div class="container">
    <div class="row">
      <div v-for="(item, index) in 6" :key="index" class="col-4">
        <div class="bootstrap-item">
          {{ index + 1 }}
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.bootstrap-item {
  background: #f0f0f0;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin-bottom: 15px;
}
</style>

方法四：动态数据绑定

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

<script>
export default {
  data() {
    return {
      gridItems: [
        { title: '项目1' },
        { title: '项目2' },
        { title: '项目3' },
        { title: '项目4' },
        { title: '项目5' },
        { title: '项目6' }
      ]
    }
  }
}
</script>

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

.grid-item {
  background: #f0f0f0;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
</style>

方法五：响应式六宫格

<template>
  <div class="responsive-grid">
    <div v-for="(item, index) in 6" :key="index" class="grid-cell">
      {{ index + 1 }}
    </div>
  </div>
</template>

<style>
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 10px;
  max-width: 400px;
}

.grid-cell {
  background: #f0f0f0;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
</style>

这些方法提供了不同场景下的六宫格实现方案，可以根据项目需求选择合适的实现方式。CSS Grid提供了最简洁的网格布局控制，Flexbox具有更好的浏览器兼容性，Bootstrap则适合快速开发。动态数据绑定展示了如何将数据与UI结合，响应式方案则确保在不同屏幕尺寸下的良好显示效果。

vue实现六宫格