I am attempting to create a grid that displays the position, name, evolution, and score of users. The challenge is, this list is constantly changing, so I cannot predict how many rows it will have in the end. In addition, I am not allowed to alter the order of elements in the HTML.
Upon inspecting the snippet below, I noticed that the .name element moves to the next row instead of staying in the current one when placed by column number. This behavior has left me puzzled...
body {
background-color: darkslategrey;
color: white;
}
.container {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 10px;
text-align: center;
}
.name,
.evolution,
.score {
border-top: 1px solid white;
border-bottom: 1px solid white;
}
.position {
grid-column: 1 / span 3;
}
.name {
grid-column: 1;
}
.evolution {
grid-column: 2;
}
.score {
grid-column: 3;
}<div class="container">
<div class="position">1st</div>
<div class="evolution">+2</div>
<div class="score">85pts</div>
<div class="name">Jack</div>
<div class="position">2nd</div>
<div class="evolution">+3</div>
<div class="score">82pts</div>
<div class="name">Kate</div>
<div class="position">3rd</div>
<div class="evolution">-2</div>
<div class="score">80pts</div>
<div class="name">Sawyer</div>
<!-- and many more, this list is dynamic -->
</div>Any insights on what might be causing this issue?