If we visually parse the grid as rows, the first row will contain the first element from every group ( 1, 2, 3), the second row will contain the second element from every group ( 4, 5, 6), and so on so forth. If we make sure to render each of those groups as one column (no more, no less), it’ll create the illusion that the items have returned to their original order when you read from left to right. These three groups represent our three columns. Elements with the same order value will be ordered on ascending order according to the source code order, or which value was set first, so in this example we’re producing three sets ordered like so: 1, 4, 7, 10 (3n+1) with order: 1, 2, 5, 8 (3n+2) with order: 2, and 3, 6, 9 (3n) with order: 3. This will set the order to 1 for the 1st element, 4th element, 7th element, etc. I’ve written another post that explains in detail how this works and why. If we want to create a masonry layout with three columns we can divide all the items into three “groups”, like so: We can combine that property with some clever use of the nth-child() selector to order items dynamically depending on their original order. Luckily, we can use the order property to change in which order elements are rendered. If you read from left to right the elements would seem to be shuffled and appear in a seemingly random order, for example 1, 3, 6, 2, 4, 7, 8, etc. This creates a layout that looks great, and similar to the masonry effect, but it could be confusing for users it creates an unexpected ordering of elements. One of the main challenges of creating a masonry layout with flexbox is that to make an item affect the positioning of an item above and below it we need to change the flex-direction of the container to column, which makes items run from top to bottom. Flexbox might seem like a great candidate to finally create this layout with CSS only, and it’s certainly possible, but it’s surprisingly hacky. You’ve probably seen masonry (or mosaic) layouts all over the internet, but it’s likely that they were all powered by Masonry or a similar JavaScript library.

Justify content css flex