javascript - Vue div显示网格删除行之间的多余空间

Question

我是 Vue 新手，对于这个元素，我试图在 div 的每行中显示 2 个玩家。我使用 display: grid; CSS 作为playerDiv id 解决了这个问题。问题是我现在遇到的问题是它在第一、第二和第三行之间造成了巨大的差距。有没有办法消除每行之间的间隙？

我将 playerDiv 的高度设为 440px，将 eachPlayerDiv 的高度设为 30px。我无法更改这一点，因为有时待办事项的数据库值可能只有 2 名玩家或 12 名玩家。有没有一种方法可以在不改变我定义的高度的情况下解决间隙问题？

目前显示为

Player 1                       Player 2




Player 3                       Player 4




Player 5                       Player 6

有没有办法将玩家显示为

Player 1                       Player 2
Player 3                       Player 4
Player 5                       Player 6

JsFiddle 链接 = https://jsfiddle.net/ujjumaki/f0js3pLa/25/

查看

<div id="app">

  <div id="playerDiv">
    <div v-for="element in todos" class="eachPlayerDiv">
      {{element.text}}
    </div>
  </div>
</div>
<style>
#playerDiv{
  height:440px;
  background-color: white;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color:red;
}

.eachPlayerDiv{
  border-style:solid;
  background-color:yellow;
  height: 30px;
}
</style>

方法

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "David", id: 1 },
      { text: "John", id: 2 },
      { text: "Alek", id: 3 },
      { text: "Joshua", id: 4},
      { text: "Jonny", id: 5},
      { text :"Sam", id:6}
    ]
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})

Answer 1

尝试添加 align-content: start; 或 center 或 end，具体取决于您想要放置 playerDiv 的位置> 的

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "David", id: 1 },
      { text: "John", id: 2 },
      { text: "Alek", id: 3 },
      { text: "Joshua", id: 4},
      { text: "Jonny", id: 5},
      { text :"Sam", id:6}
    ]
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

  <div id="playerDiv">
    <div v-for="element in todos" class="eachPlayerDiv">
      {{element.text}}
    </div>
  </div>
</div>
<style>
#playerDiv{
  height:440px;
  background-color: white;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color:red;
  align-content: start;
}

.eachPlayerDiv{
  border-style:solid;
  background-color:yellow;
  height: 30px;
}
</style>