当前位置：首页 > VUE

vue实现grid动态布局

2026-01-22 21:16:37VUE

Vue 实现 Grid 动态布局的方法

使用 CSS Grid 布局

CSS Grid 提供了强大的网格布局能力，结合 Vue 的动态数据绑定可以轻松实现动态网格布局。通过 v-for 指令动态生成网格项，并利用 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: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
    };
  }
};
</script>

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

.grid-item {
  background: #f0f0f0;
  padding: 16px;
  border-radius: 4px;
}
</style>

动态调整列数

可以通过响应式数据动态调整网格的列数，例如根据屏幕宽度或用户输入改变 grid-template-columns。

vue实现grid动态布局

<template>
  <div>
    <input v-model="columnCount" type="number" min="1" max="10" />
    <div class="grid-container" :style="{ 'grid-template-columns': `repeat(${columnCount}, 1fr)` }">
      <div v-for="(item, index) in items" :key="index" class="grid-item">
        {{ item }}
      </div>
    </div>
  </div>
</template>

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

使用第三方库

如果需要更复杂的动态网格布局（如拖拽排序、动态调整大小），可以使用第三方库如 vue-grid-layout。

安装：

vue实现grid动态布局

npm install vue-grid-layout

示例：

<template>
  <grid-layout
    :layout="layout"
    :col-num="12"
    :row-height="30"
    :is-draggable="true"
    :is-resizable="true"
  >
    <grid-item v-for="item in layout" :key="item.i"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
    >
      {{ item.i }}
    </grid-item>
  </grid-layout>
</template>

<script>
import { GridLayout, GridItem } from 'vue-grid-layout';

export default {
  components: {
    GridLayout,
    GridItem
  },
  data() {
    return {
      layout: [
        { x: 0, y: 0, w: 2, h: 2, i: '1' },
        { x: 2, y: 0, w: 2, h: 4, i: '2' },
        { x: 4, y: 0, w: 2, h: 5, i: '3' }
      ]
    };
  }
};
</script>

响应式网格布局

结合 Vue 的响应式特性和 CSS 媒体查询，可以实现响应式网格布局，适应不同屏幕尺寸。

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

<style>
.grid-container {
  display: grid;
  gap: 16px;
  padding: 16px;
}

/* 小屏幕：1列 */
@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

/* 中等屏幕：2列 */
@media (min-width: 601px) and (max-width: 900px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 大屏幕：3列 */
@media (min-width: 901px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
}
</style>