Vue div display grid remove extra space between rows-CodePudding

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

CodePudding user response：

Wrap the grid within a container that is defined as flexbox. Remove the 440px height from the grid-container and apply it to the flexbox container. That you can use the vertical-align (align-item) to center the grid without gap between the rows.

//for demonstration purpose only

document.querySelector('#playerDiv').innerHTML = '<div class="eachPlayerDiv">Box 1</div><div class="eachPlayerDiv">Box 2</div><div class="eachPlayerDiv">Box 3</div><div class="eachPlayerDiv">Box 4</div><div class="eachPlayerDiv">Box 5</div><div class="eachPlayerDiv">Box 6</div>';

.wrapper {
  height: 440px;
  display: flex;
  align-items: center; /* vertical center */
  border: 1px solid red; /* for demo purpose only */
}
  


#playerDiv {
  flex-grow: 1; /* let the grid consume the entire width */
  background-color: white;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: red;
}

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

<div id="app">
  <div class="wrapper">
    <div id="playerDiv">
      <div v-for="element in todos" class="eachPlayerDiv">
        {{element.text}}
      </div>
    </div>
  </div>
</div>

CodePudding user response：

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>