Masonry Layout with Flexbox in CSS (Example)
Simple example of creating a masonry layout with Flexbox
You need to master both Flexbox and CSS Grid in order to professionally build modern websites & web apps. If you haven't mastered both of them yet, I highly recommend going through my CSS Course.
Let's try creating this layout with CSS:
How it works:
1) There is a parent element and 7 child elements. We give each child element a
width of 400px and each one will get a different height.
2) By setting
flex on the parent element, we 'unlock' the Flexbox functionalities. This parent element automatically becomes the so-called flex-container and its direct child elements become the so-called flex-items.
3) The default behavior is that all child elements will be laid out horizontally along a row. They may even flow out of the flex-container. To prevent it from overflowing the container, use
flex-wrap and set it to
4) This horizontal / row direction will not allow us to create a masonry layout properly, so we need to change the
5) Now we just want to center all flex items horizontally in the container. Usually the
align-content properties are for the vertical direction, but since we set
column, that switches to the horizontal direction. In this case we want to use the
align-content property because there are multiple columns, if we only had 1 column we could use the
By the way, I think CSS is the 'bottleneck' to most websites & web apps. I believe it's the highest-ROI skill you can master.
Before I mastered CSS, I lost a ton of time & energy fiddling around with CSS.
So I created a CSS course to help you avoid the same mistake. Check it out here if you're interested.
Would you like to be notified when I release a new course? You'll get early bird discounts. Sign up for my newsletter here.
Also, I show projects of upcoming courses on social media, follow me here: