vue实现grid

Vue 实现 Grid 布局的方法

使用 CSS Grid 布局

Vue 可以结合 CSS Grid 布局实现灵活的网格系统。CSS 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: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    }
  }
}
</script>

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

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

使用第三方组件库

多个流行的 Vue UI 组件库提供了现成的 Grid 组件，简化开发流程。

Element UI:

<el-row :gutter="20">
  <el-col :span="6" v-for="(item, index) in items" :key="index">
    <div class="grid-item">{{ item }}</div>
  </el-col>
</el-row>

Vuetify:

<v-container>
  <v-row>
    <v-col cols="12" sm="6" md="4" v-for="(item, index) in items" :key="index">
      <v-card>{{ item }}</v-card>
    </v-col>
  </v-row>
</v-container>

自定义响应式 Grid 组件

可以创建自定义的响应式 Grid 组件，根据屏幕尺寸动态调整列数。

<template>
  <div class="responsive-grid" :style="{ '--columns': columns }">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    columns: {
      type: Number,
      default: 3
    }
  }
}
</script>

<style>
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: 16px;
}

@media (max-width: 768px) {
  .responsive-grid {
    --columns: 2;
  }
}

@media (max-width: 480px) {
  .responsive-grid {
    --columns: 1;
  }
}
</style>

使用 CSS 变量动态控制

通过 CSS 变量实现更灵活的 Grid 控制，可在运行时动态调整布局参数。

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

<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5, 6],
      columns: 3,
      gap: '16px'
    }
  },
  computed: {
    gridStyle() {
      return {
        '--columns': this.columns,
        '--gap': this.gap
      }
    }
  }
}
</script>

<style>
.dynamic-grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: var(--gap);
}
</style>

瀑布流 Grid 实现

对于图片墙等需要瀑布流布局的场景，可以使用 Masonry 风格的 Grid。

<template>
  <div class="masonry-grid">
    <div 
      v-for="(item, index) in items" 
      :key="index" 
      class="masonry-item"
      :style="{ height: item.height }"
    >
      {{ item.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { height: '200px', content: 'Item 1' },
        { height: '250px', content: 'Item 2' },
        { height: '180px', content: 'Item 3' }
      ]
    }
  }
}
</script>

<style>
.masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 10px;
  gap: 16px;
}

.masonry-item {
  grid-row-end: span calc(var(--span) / 10);
  background: #eee;
}
</style>