This is a very simple flex layout based on some examples from a recent smashingmagazine article.
This example was used to show how “flex” fails to created a true grid, because the lower blocks will not always line up with the blocks above. Having said that, there are settings that will allow the over flow to align with the boxes above, but will leave empty space if the number of items in each row are not equal.
The first example will keep each item aligned with the item above, but may leave the last row with an empty space. The important line of code is in the class controlling the item (inside the row) – in this case, line 16:
On the other hand, you can let the uneven items on the last row stretch to fill the space, which is quite handy in some situations.
Again, line 16 is the key:
Notice that I have changed the first 0 to a 1. This first value toggles between “initial” and “auto”. For more details on that check out W3Schools