grid布局

 响应式排列 最小宽度为100px 不够自动向下排列

.container {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

定义变量 

 <draggable
            v-model="moreFunction"
            class="grid-container"
            item-key="grid"
            animation="300"
            chosenClass="chosen"
            forceFallback="true"
            :style="gridColumnsStyleFw"
          >

</draggable>

<script setup lang="ts">
import { ref } from "vue"

 const gridColumnsStyleFw = ref(null)
//举例使用
 gridColumnsStyleFw.value = `grid-template-columns:repeat(${rowAndColumnFw.value.column}, 1fr)`

</script>