CSS网格Gird布局创建网格Gird通过将属性display的值设为grid，HTML元素就可以变为网格容器。注意：在CSS网格中，父元素称为容器（container），它的子元素称为项（items）。#container{display:grid;}列，行ColumnRow在一个网格容器中使用grid-template-columns属性可以添加一些列，示例如下：.container{display:grid;grid-template-columns:50px50px;}上面的代码会在网格容器中添加两列，宽度均为50px。grid-template-columns属性值的个数表示网格的列

CSS网格Gird布局创建网格Gird通过将属性display的值设为grid，HTML元素就可以变为网格容器。注意：在CSS网格中，父元素称为容器（container），它的子元素称为项（items）。#container{display:grid;}列，行ColumnRow在一个网格容器中使用grid-template-columns属性可以添加一些列，示例如下：.container{display:grid;grid-template-columns:50px50px;}上面的代码会在网格容器中添加两列，宽度均为50px。grid-template-columns属性值的个数表示网格的列

先来效果图展示展示.png拖拽尺寸.png拖拽后.png移动.png组件封装大家这块直接复制使用就OKimportVueGridLayoutfrom'vue-grid-layout';//importChartfrom"@/components/chart/index.vue";exportdefault{components:{GridLayout:VueGridLayout.GridLayout,GridItem:VueGridLayout.GridItem,//Chart},props:{//布局数据layout:{type:Array,default:()=>[]},//是否可拖拽is

先来效果图展示展示.png拖拽尺寸.png拖拽后.png移动.png组件封装大家这块直接复制使用就OKimportVueGridLayoutfrom'vue-grid-layout';//importChartfrom"@/components/chart/index.vue";exportdefault{components:{GridLayout:VueGridLayout.GridLayout,GridItem:VueGridLayout.GridItem,//Chart},props:{//布局数据layout:{type:Array,default:()=>[]},//是否可拖拽is