Masonry-Style Layout Only With Css

Creating a Masonry Layout using CSS?

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:

  1. the parent must have display: flex.

  2. you have to tell the flow direction, in this case you want columns.

  3. 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.

How to create masonry layout using css only?

You can use flexbox. See codepen for example, and complete guide to flex box to learn more.

In order to keep the layout horizontal, adjust the flex-direction to your liking.

Masonry Layout in CSS3?

Here is a new answer and hope it solves your problem , following two Fiddles , to handle this issue , the first script will throw all odd children in the left side , and all even children on the right side

side1=0,side2=0

$(".flexbox").children().each(function(index, element) {
if (index % 2 === 0) //odd children (starts with 0 )
{
$(this).css("top",side1+"px")
side1+=parseInt($(this).css("height"))
}
else //even children
{
$(this).css("top",side2+"px")
$(this).css("left","50%")
side2+=parseInt($(this).css("height"))
}
});

http://jsfiddle.net/prollygeek/QD9kZ/

while this second fiddle , will balance the two sides based on elements heights so that there is no big deviation in the columns heights all the time , use any script of them it is up to you.

side1=0,side2=0
$(".flexbox").children().each(function(index, element) {
if(side1<=side2)
{
$(this).css("top",side1+"px")
side1+=parseInt($(this).css("height"))
}
else if(side2<side1)
{
$(this).css("top",side2+"px")
$(this).css("left","50%")
side2+=parseInt($(this).css("height"))
}

});

http://jsfiddle.net/prollygeek/hP6fS/



Related Topics



Leave a reply



Submit