I have recently started working with Vue and in my current project, I encountered a challenge where I needed to display 2 players in each row within a div. To achieve this, I utilized the display: grid; CSS property on the playerDiv id. However, I am facing an issue where there is a significant gap between the rows. Is there a way to eliminate this gap?
The height for playerDiv is set to 440px and eachPlayerDiv has a height of 30px. Due to varying database values, which can range from 2 players to 12 players, I cannot modify these heights. Is there a solution to address the gap without adjusting the predefined heights?
Currently, the player display appears as:
Player 1 Player 2
Player 3 Player 4
Player 5 Player 6
Is there a way to show 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
}
}
})