I’m currently facing an issue with my list where, upon reaching a certain number of items (in this case 5), the list starts moving up the page instead of extending downwards as expected. I suspect that this problem is related to my use of CSS grid-templates since I am still new to it. Despite my extensive search efforts, I have yet to find any solution!
Here is the code snippet in question:
What could be causing the items in my list to move upward on the page after reaching a specific number?
body {
margin: 0;
padding: 0;
background: #2e112d;
}
.container {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 60px repeat(10, 10%);
height: 100vh;
}
.nav-bar {
grid-column: 1 / 6;
grid-row: 1 / 2;
background: #ffdbc5;
text-align: center;
}
.brand {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
display: inline-block;
padding: 1.5%;
}
.background-image {
grid-row: 2 / 9;
grid-column: 1 / -1;
overflow: hidden;
position: relative;
}
img {
position: absolute;
display: block;
height: 100%;
width: auto;
margin: 0 auto;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
}
workouts {
grid-column: 2 / 5;
grid-row: 2 / -1;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr);
}
.new-workout {
font-size: 200%;
color: white;
background: none;
border: white 10px;
display: inline-block;
height: 30%;
width: 30%;
grid-row: 1;
margin: auto;
z-index: 1;
}
.workout-list {
display: block;
position: relative;
align-self: start;
grid-column: 1 / 2;
grid-row: 3;
z-index:1;
}
button.btn {
color: #5a5a5a;
background-color: #e8e8e8;
margin: 10px 0 10px 0;
width: 100%
}
span.delete {
display: inline-block;
float: right;
color: red;
}<div id="app">
<div data-reactroot="" class="container">
<div class="nav-bar"></div>
<div class="brand">Fiery Leaf</div>
<div class="background-image">
<img src="/static/media/landscape-banner.67e9e794.jpg">
</div>
<div class="workouts">
<button class="new-workout">New Workout</button>
<div class="workout-list">
<div class="workout">
<button type="button" class="btn btn-default" />
</div>
<div class="workout">
<button type="button" class="btn btn-default" />
</div>
</div>
</div>
</div>
</div>