Vue div display grid remove extra space between rows

I am new to Vue and for this project, I was trying to display 2 players in each row for a div. I solved that using display: grid; CSS as on playerDiv id. The issue is I am having right now is it creates a huge gap in between the first, second, and third rows. Is there a way to remove that gap between each rows?

I am using height as 440px for playerDiv and 30px for eachPlayerDiv. I cannot change that as sometimes the database value on todos can be just 2 players or 12 players. Is there a way to solve that gap issue without changing height as I have defined?

Currently it displays as

Player 1                       Player 2




Player 3                       Player 4




Player 5                       Player 6

Is there a way to display players as

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

JsFiddle Link = https://jsfiddle.net/ujjumaki/f0js3pLa/25/

View

<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>

Methods

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

Try to add align-content: start; or center or end depending where you want to place playerDiv‘s

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>

Advertisement

Answer