Creating a Masonry Layout using CSS?

Question

I want to create this layout using only CSS and not jquery or javascript. Is it possible and if so, please direct me to the right source. Thanks you :)

I tried my hand at this but it didn't come out well: http://codepen.io/anon/pen/GJZWoX

HTML:

<div class="parent">

  <div class="red">
  </div>

  <div class="blue">
  </div>

  <div class="red">
  </div>

   <div class="red">
  </div>

</div>

CSS:

.parent{
  width:330px;
}

.red{
  float:left;
  width:150px;
  height:150px;
  margin-bottom:10px;
  margin-left:10px;
  background-color:red;
}

.blue{
  float:left;
  width:150px;
  height:300px;
  margin-bottom:10px;
  margin-left:10px;
  background-color:blue;
}

enter image description here

Don't you just have to set `height: auto` and insert content? the div height will automatically change its height according to the size of content insize of it. Basically, all you have to do is set number of columns and width for each column. — odedta, May 14 '15 at 05:49

score 1 · Accepted Answer · answered May 14 '15 at 09:39

Flexbox allows you to do this due to its hability to distribute content and gaps.

Flexbox use is not very easy but not imposible. Here is some help: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.parent{
  background: green;
  width:330px;
  height: 330px;
  display: flex;
  flex-flow: column wrap;
}

.red, .blue{
  margin: 10px;
}
.red{
  flex: 1 1 100px;;
  background-color:red;
}

.blue{
  flex: 2 2 150px;
  background-color:blue;
}

Here is a pen for you:http://codepen.io/vandervals/pen/OVNvaE?editors=110

So, the explanation of what is happening here is as follows:

the parent must have display: flex.
you have to tell the flow direction, in this case you want columns.
for the items, you have to define the flex properties. In this case, you want the red to be smaller, then the proportion would be 1 and the tendency would be to be 100px if it can. The blue has a double "weight" and the tendency is 150px.

I'm helping to spread the solution I found to this issue so that it can be easily found. https://stackoverflow.com/a/25668648/871781 CSS - no flexbox, no vertical gap ! — JoeCodeCreations, Oct 03 '17 at 22:22

Creating a Masonry Layout using CSS?

1 Answers1