Centering a grid with flexbox changes grid structure - css

Question

I am making a horizontal grid that contains 4 divs, I want the grid to be horizontally centered, so I wrap my grid container with another div so that it will act as a flexbox parent and try to center it (check the code below), while the grid has been centered the horizontal grid has now become a vertical grid
HTML:
<h2>My Simple Grid</h2>
<div class="grid-holder">
<div class="grid-container grid-container--fill">
<div class="grid-element">
1
</div>
<div class="grid-element">
2
</div>
<div class="grid-element">
3
</div>
<div class="grid-element">
4
</div>
</div>
</div>
CSS:
.grid-container {
display: grid;
}
.grid-container--fill {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.grid-element {
background-color: darkGreen;
padding: 20px;
color: #fff;
border: 1px solid #fff;
}
.grid-holder{
display: flex;
flex-direction: column;
align-items: center;
}
body {
padding: 2em;
}
Current Result:
current result
Expected Outcome:
Grid elements 1,2,3,4 should remain horizontal while the grid-holder div remains centered, sorry for the bad drawing
my drawing of expected result
I also want to know why did I need to use flex-direction: column ? Am I making any silly mistake, or forgot the basics ? Thanks in advance.

Answer 1

After you added align-items: center; to your flex container grid-holder, And with grid-template-columns set to auto-fill for the class grid-container--fill many columns are implicitly created with each item to fill the whole row with as many columns as it can, then the elements will be centred but only one element will be shown in a row, To fix that change the auto-fill by 4 to precise the number of columns that should be displayed in each row as follow:
.grid-container {
display: grid;
}
.grid-container--fill {
grid-template-columns: repeat(4, minmax(100px, 1fr));
}
.grid-element {
background-color: darkGreen;
padding: 20px;
color: #fff;
border: 1px solid #fff;
}
.grid-holder{
display: flex;
flex-direction: column;
align-items: center;
}
body {
padding: 2em;
}
<h2>My Simple Grid</h2>
<div class="grid-holder">
<div class="grid-container grid-container--fill">
<div class="grid-element">
1
</div>
<div class="grid-element">
2
</div>
<div class="grid-element">
3
</div>
<div class="grid-element">
4
</div>
</div>
</div>