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:
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.
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
How to Force Child Div to Be 100% of Parent Div'S Height Without Specifying Parent'S Height
How to Have Multiple ≪Tbody≫ in Same ≪Table≫
Should I Use ≪I≫ Tag For Icons Instead of ≪Span≫
How to Set Input Type Date'S Default Value to Today
How Does the "Position: Sticky;" Property Work
How to Create Your Own HTML Tag in Html5
Get the Value in an Input Text Box
Can HTML Checkboxes Be Set to Readonly
How to Prevent Column Break Within an Element
Generate an HTML Response in a Java Servlet
Create HTML Table With SQL For Xml
Inputting a Default Image in Case the Src Attribute of an HTML ≪Img≫ Is Not Valid
How to Escape Hash Character in Url
Make Background Color Extend into Overflow Area
Why Are My Css3 Media Queries Not Working on Mobile Devices
How to Combine Flexbox and Vertical Scroll in a Full-Height App