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