How can I properly display my divs in masonry style using flex?

Tags: html,css

Problem :

I'm trying to create display divs in a masonry style using flex/flexbox. It must be a maximum of 2 columns. Each div have the same width (so it would split into 2 columns evenly), but the the height varies depending on the content of the div. So some height will be smaller than others.

Straight to the problem:

The blue boxes are my divs (child) with content in each one of them. You can notice that they have same width and some have smaller height than others.

Problem: There's a LARGE gap between the top and bottom child on the left column. The bottom child should move up to the bottom of the top child. How can I do this?


Here is the CSS in use:

#main {
   width: 100%;
   height: auto;
   display: -webkit-flex; /* Safari */
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;

.divBob {
   -webkit-flex: 1;  /* Safari 6.1+ */
   -ms-flex: 1;  /* IE 10 */    
   flex: 0 1 auto;
   padding: 5px;
   border: 1px solid #CCE0FF;
   margin: 5px;
   width: 45%;
   height: 100%;
   background-color: #F0F3FA;//#F9FBFF;

.divBob:nth-child(2n+1) {
   clear: right;   

Solution :

Is there any reason it has to be with flexbox?

If you don't mind using an alternative method this tutorial will show you exactly how to create masonry-style layouts. Here's what you'll end up with.

The demo markup is as follows:

<div class="masonry">
   <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
   <div class="item">Neque, vitae, fugiat, libero corrupti officiis sint facilis tempora quidem repudiandae praesentium odit similique adipisci aut.</div>
   <div class="item">Incidunt sit unde minima in nostrum?</div>
   <div class="item">Ducimus, voluptates, modi, delectus animi maiores consequuntur repellat quisquam fugiat eum possimus enim culpa totam praesentium magni quae!</div>
   <div class="item">Lorem ipsum dolor sit amet, dicta dolore adipisci hic ipsam velit deleniti possimus cumque accusantium rerum quibusdam.</div>
   <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, praesentium consequatur ducimus commodi quam ex illo omnis dicta reiciendis vel nesciunt deserunt aut sequi nam mollitia perferendis ipsam possimus temporibus!</div>
   <div class="item">Ab, adipisci, temporibus eaque quis harum perferendis incidunt cupiditate doloribus dolor numquam voluptates ipsum dolore aspernatur et voluptate ipsam beatae animi culpa.</div>

We make use of the CSS properties column-count and column-gap which are applied to the parent element to determine the number of columns in your layout:

.masonry { /* Masonry container */
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;

you then need to apply this style to each child:

.item { /* Masonry bricks or child elements */
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;

The tutorial also provides a link to a JS fallback for older browsers

and that's all you need to create a Masonry-style layout :)

    CSS Howto..

    How to remove

    how to set max size of a counter?

    How should I do this in CSS?

    How to put div under content when resize window?

    How to get relative CSS from photoshop artboard?

    How to get table-row css and border property work together?

    How do you show just the first line of text of a div and expand on click?

    How do I use CSS to select for a tag with arbitrary name attribute?

    How do people have long segmented web pages? [closed]

    How to set style class to another class depends on selector?

    When using WebFont loader, how to hardcode the css?

    How can I use CSS to create a middle column that fills the height of the page?

    How to reference CSS children [duplicate]

    how to arrange 2 images side by side in mobile view?

    Sidebar, Navigation and Content how to do it?

    How to get text within div to be relative to the div's width and height, CSS, HTML

    how to pass context value to css

    How do I center text relative to its parent div with CSS?

    How to place background image behind page content?

    How do I add background color to just the width of centred text?

    How to change font-color for disabled input?

    How to create double border which is not touching to edges in pure css?

    CSS: How to align buttons and text horizontally

    CSS selector hierarchy? How to reverse engineer to get the styling?

    How to make an image behave like in Primefaces?

    How do I import 2 different files icons?

    How to fix logo place in my website with css

    Flexslider - How to make two slider functioning together (images and a paragraph text) using a single directionNav?

    How to use this CSS rule for divs? [JSFiddle]

    How to create desired shapes and position them accordingly using CSS, CSS3?