Why does the divs starts from between in case of overflow hidden? - html

Question

Styles
body{
margin:unset;
}
.carousel{
height: 200px;
width: 100%;
padding: 10px;
box-sizing: border-box;
display: grid;
grid-template-columns: 50px 1fr 50px;
grid-gap: 10px;
}
.carousel-controls{
color: navy;
}
.carousel > div{
display: grid;
align-items: center;
justify-content: center;
}
.carousel-holder{
background: purple;
display: grid;
grid-gap: 10px;
grid-auto-flow: column;
overflow: hidden;
padding: 10px;
box-sizing: border-box;
}
.carousel-cards{
background: white;
height: 100%;
width: 125px;
display: grid;
place-items:center;
font-weight: bolder;
color: navy;
}
Markup with bit of php for card generation
<div class="carousel">
<div class="carousel-controls carousel-controls-prev ">
<i class="fas fa-arrow-left"></i>
</div>
<div class="carousel-holder">
<?php
$x = 1;
while ($x <= 250) {
echo "<div class='carousel-cards'>".$x."</div>";
$x++;
}
?>
</div>
<div class="carousel-controls carousel-controls-next ">
<i class="fas fa-arrow-right"></i>
</div>
</div>
The result
Problem
I am making a carousel to which Ill add javascript later. Now my problem is that the generated cards which should start from 1 are actually starting from 120 when I am using overflow hidden.

Answer 1

In regards to your content centering, in your css, it should be justify-content:start and not justify-content:center.
So, it should look like this:
.carousel > div{
display: grid;
align-items: center;
justify-content: start;
}

Answer 2

You can change your alignment to left if you want it to start at 1 rather than the center using:
.carousel-cards{
justify-content: left;
}
See it in action below:
body{
margin:unset;
}
.carousel{
height: 200px;
width: 100%;
padding: 10px;
box-sizing: border-box;
display: grid;
grid-template-columns: 50px 1fr 50px;
grid-gap: 10px;
}
.carousel-controls{
color: navy;
}
.carousel > div{
display: grid;
align-items: center;
justify-content: left;
}
.carousel-holder{
background: purple;
display: grid;
grid-gap: 10px;
grid-auto-flow: column;
overflow: hidden;
padding: 10px;
box-sizing: border-box;
}
.carousel-cards{
background: white;
height: 100%;
width: 125px;
display: grid;
place-items:center;
font-weight: bolder;
color: navy;
}
<div class="carousel">
<div class="carousel-controls carousel-controls-prev ">
<i class="fas fa-arrow-left"></i>
</div>
<div class="carousel-holder">
<div class='carousel-cards'>1</div>
<div class='carousel-cards'>2</div>
<div class='carousel-cards'>3</div>
<div class='carousel-cards'>4</div>
<div class='carousel-cards'>5</div>
<div class='carousel-cards'>6</div>
<div class='carousel-cards'>7</div>
<div class='carousel-cards'>8</div>
<div class='carousel-cards'>9</div>
<div class='carousel-cards'>10</div>
<div class='carousel-cards'>11</div>
<div class='carousel-cards'>12</div>
<div class='carousel-cards'>13</div>
<div class='carousel-cards'>14</div>
<div class='carousel-cards'>15</div>
<div class='carousel-cards'>16</div>
<div class='carousel-cards'>17</div>
<div class='carousel-cards'>18</div>
<div class='carousel-cards'>19</div>
<div class='carousel-cards'>20</div>
<div class='carousel-cards'>21</div>
<div class='carousel-cards'>22</div>
<div class='carousel-cards'>23</div>
<div class='carousel-cards'>24</div>
<div class='carousel-cards'>25</div>
</div>
<div class="carousel-controls carousel-controls-next ">
<i class="fas fa-arrow-right"></i>
</div>
</div>