vue-grid-layout+component 实现动态布局，CSS的标准文档流

在Vue中，使用vue-grid-layout可以实现一个动态布局的功能。以下是一个简单的例子，展示如何使用vue-grid-layout和标准的CSS来创建一个动态布局。

首先，确保安装了vue-grid-layout：

npm install vue-grid-layout

然后，在Vue组件中使用它：

<template>
  <div>
    <grid-layout
      :layout="layout"
      :col-num="12"
      :row-height="30"
      :is-draggable="true"
      :is-resizable="false"
      :vertical-compact="true"
      :use-css-transforms="true"
    >
      <grid-item v-for="item in layout" :key="item.i" :layout="item">
        <div class="grid-content">{{ item.i }}</div>
      </grid-item>
    </grid-layout>
  </div>
</template>
 
<script>
import Vue from 'vue';
import { GridLayout, GridItem } from 'vue-grid-layout';
 
Vue.component('grid-layout', GridLayout);
Vue.component('grid-item', GridItem);
 
export default {
  data() {
    return {
      layout: [
        { x: 0, y: 0, w: 2, h: 2, i: '0' },
        { x: 2, y: 0, w: 2, h: 2, i: '1' },
        { x: 4, y: 0, w: 2, h: 2, i: '2' },
        { x: 6, y: 0, w: 2, h: 2, i: '3' },
      ]
    };
  }
};
</script>
 
<style>
.grid-content {
  border: 1px solid #ddd;
  background: #efefef;
  padding: 10px;
  text-align: center;
}
</style>

在这个例子中，我们定义了一个layout数组来描述布局的初始状态，每个元素包含了x、y、w、h和i这几个属性，分别代表了位置和尺寸以及每个网格项的唯一标识。GridLayout和GridItem组件会根据这些属性来渲染网格布局。

CSS部分定义了.grid-content类，这是应用于每个网格项内容的样式。这个样式可以根据你的需求进行自定义，它遵循标准的CSS布局流。

这个例子提供了一个基本的动态布局的实现，你可以根据自己的需求进行扩展和定制。