# Masonry Layout with Flexbox in CSS (Example)

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](https://bytegrad.com/courses/professional-css?utm_source=blog-post&utm_medium=blog-post&utm_campaign=blog-post).

Let's try creating this layout with CSS:

![CSS-Flexbox-Three-Column-Masonry-Layout (2).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636560917671/f4FJWUF4H.png align="left")

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 `display` to `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 `wrap`.
    
4. This horizontal / row direction will not allow us to create a masonry layout properly, so we need to change the `flex-direction` to `column`.
    
5. Now we just want to center all flex items horizontally in the container. Usually the `align-items` and `align-content` properties are for the vertical direction, but since we set `flex-direction` to `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 `align-items` property.
    

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.

I was learning about advanced JavaScript topics when I couldn't even implement basic layouts in CSS...

So I created a CSS course to help you avoid the same mistake. Check it out [here](https://bytegrad.com/courses/professional-css?utm_source=blog-post-2&utm_medium=blog-post-2&utm_campaign=blog-post-2) 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](https://email.bytegrad.com).

Also, I show projects of upcoming courses on social media, follow me here:

[Facebook](https://www.facebook.com/ByteGrad)[Twitter](https://twitter.com/bytegradcom)[Instagram](https://www.instagram.com/bytegradcom/)