Vue.Draggable div项显示左和右

Question

我是Vue.js的新手，对于这个项目，我使用瓦德拉格来拖动项目。当前，拖放div中的项显示为

Text 1
Text 2
Text 3
Text 4

有什么方法我们可以改变它并显示为

Text 1   Text 2
Text 3   Text 4 

JsFiddle Link = https://jsfiddle.net/ujjumaki/y1xw95rc/41/

视图

<div id="app">
  <div>
    <draggable id="first" data-source="juju" :list="todos" class="list-group" draggable=".item">
     <div class="list-group-item item" v-for="(element, index) in todos" :key="index" style="border-style: outset; 
margin-top:0.5%; width: 10%; border-color:#17a2b8; border-width:thin;">
     <p>
     {{element.text}} id {{element.id}}
     </p>
      </div>
   </draggable>
  </div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>

方法

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Text 1", id: "1" },
      { text: "Text 2", id: "2" },
      { text: "Text 3", id: "3"},
      { text: "Text 4", id: "4" }
    ]
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})

Answer 1

尝试添加以下css：

#first {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  text-align: center;
}
.list-group-item {
  width: 100% !important;
}