align Flex elements from bottom row under the other elements [duplicate] - html

Question

This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Closed 5 years ago.
I have few elements I'm trying to align. the first two rows are perfectly aligned because they have the same number of elements. the last one have less elements, and I would like to keep the bottom elements aligned with the top ones. Like this image example
HTML
<div id="bulbsCentralizer">
<div id="letterCentralizer">
<h3 class="letter">A</h3>
</div>
<div id="letterCentralizer">
<h3 class="letter">B</h3>
</div>
<div id="letterCentralizer">
<h3 class="letter">C</h3>
</div>
<div id="letterCentralizer">
<h3 class="letter">D</h3>
</div>
<div id="letterCentralizer">
<h3 class="letter">E</h3>
</div>
<div id="letterCentralizer">
<h3 class="letter">F</h3>
</div>
<div id="letterCentralizer">
<h3 class="letter">G</h3>
</div>
</div>
CSS
#bulbsCentralizer {
width: 600px;
height: auto;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
flex-wrap: wrap;
flex-flow: row wrap;
}
#letterCentralizer {
width: 40px;
height: 60px;
text-align: center;
background-color: orange;
position: relative;
float: left;
width: calc(100% * (1/8) - 10px - 1px);
margin-top:10px;
}

Answer 1

If you want to use flex to align your elements, don't use float or position. Use flex properties! More info on: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
width: 200px;
}
.element {
width: 50px;
height: 50px;
background-color: red;
flex: 0 0 32%;
margin: 1% 0;
}
.element:nth-child(3n-1) {
margin-left: 2%;
margin-right: 2%;
}
<div class="container">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>

Answer 2

https://jsfiddle.net/vwkvstfg/6/
Basically, flex handles displays over one axis pretty well. But this problem's has a better solution - using display: grid
grid-template-columns is gonna be used here as more of a convenience.
Cheers!