I have 5 Elements I want to align in 2 rows, the first row with 3 elements with the same width and in the second row, one element 2/3 width and the other one 1/3
<div class="container"><div class="width-third"><div class="width-third"><div class="width-third"></div><div class="container"><div class="width-two-third"><div class="width-third"></div>When I use grid:
.container { display: grid; grid-template-columns: repeat(12, [col-start] 1fr); grid-gap: 30px;}.width-third { grid-column: span 4;}.width-two-third { grid-column: span 8;}
everything looks good. The important thing for me: the end of the width-two-third element in the second row aligns with the end of the 2nd element in the first row.
However, when I use flex:
.container { display: flex; gap: 30px;}.width-third { flex-basis: calc(100%/3);}.width-two-third { flex-basis: calc(200%/3);}
the end of the element is slightly off. I guess it is because grid and flex handle gap differently? Is there a way to achieve the same result with flexbox?