使用margin导致GridItem内容高度变化问题

[wycst]

您好，设置margin后，GridItem的高度不再是固定的h乘以rowHeight,请问哪个属性可以控制这个，期望是高度固定为item的h*rowHeight?

以下是测试的代码

<template>
  <grid-layout
    ref="gridLayout"
    v-model:layout="layout"
    :col-num="12"
    :row-height="30"
    :is-draggable="true"
    :is-resizable="true"
    :is-mirrored="false"
    :vertical-compact="true"
    :margin="[20, 20]"
    :use-css-transforms="true"
  >
    {{ layout }}
    <grid-item
      ref="gridItem"
      v-for="item in layout"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
      :key="item.i"
    >
      <div style="height: 100%; background-color: #cccccc">
        {{ item.i }}
      </div>
    </grid-item>
  </grid-layout>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const layout = ref([
  { x: 0, y: 0, w: 2, h: 20, i: "0" },
  { x: 2, y: 0, w: 2, h: 4, i: "1" },
  { x: 4, y: 0, w: 2, h: 5, i: "2" },
  { x: 6, y: 0, w: 2, h: 3, i: "3" },
  { x: 8, y: 0, w: 2, h: 3, i: "4" },
  { x: 10, y: 0, w: 2, h: 3, i: "5" },
  { x: 0, y: 5, w: 2, h: 5, i: "6" },
  { x: 2, y: 5, w: 2, h: 5, i: "7" },
  { x: 4, y: 5, w: 2, h: 5, i: "8" },
  { x: 6, y: 3, w: 2, h: 4, i: "9" },
  { x: 8, y: 4, w: 2, h: 4, i: "10" }
]);
</script>

<style scoped>
.vue-grid-layout {
  background: #eee;
}

.vue-grid-item:not(.vue-grid-placeholder) {
  background: #ccc;
  border: 1px solid black;
}

.vue-grid-item.static {
  background: #cce;
}

.vue-grid-item .text {
  font-size: 24px;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 100%;
  width: 100%;
}
</style>

第一个item的h为20， 行高设置的30px， margin 为 [20, 20] ，实际上第一个item生成的高度为980px， 不是预期的600px

[wycst]

版本为3.1.2