0

I'm working on a masonry layout for an upcoming project and would like to know if their is a way to arrange the masonry tiles from left to right instead of top to bottom with only CSS.

I tried recreating the layout on jsfiddle but the output looks different so i decided to take a screenshot instead

http://i255.photobucket.com/albums/hh140/testament1234/Masonry_zps8b8519b6.jpg

HTML

<div class="masonry">

    <div class="masonry-columns">
    <h2>1st Masonry</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget fringilla ante. Phasellus tincidunt erat eu sodales semper. Donec sed lorem ut dui lobortis feugiat non at metus. Sed volutpat tortor vitae purus cursus, ut vehicula orci hendrerit. In ac metus ut massa fringilla porttitor. Aenean vitae sapien rutrum, rutrum enim varius, elementum magna. Aliquam sollicitudin accumsan dui, ut faucibus tellus pretium fermentum. In fringilla quam lorem, eget congue dolor euismod at. Proin nunc lorem, rutrum eu rutrum ac, tristique convallis turpis. Fusce faucibus erat a mauris consequat, sed cursus velit aliquet. 
    </div>

    <div class="masonry-columns">
    <h2>2nd Masonry</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget fringilla ante. Phasellus tincidunt erat eu sodales semper. Donec sed lorem ut dui lobortis feugiat non at metus. Sed volutpat tortor vitae purus cursus, ut vehicula orci hendrerit. In ac metus ut massa fringilla 
    </div>

    <div class="masonry-columns">
    <h2>3rd Masonry</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget fringilla ante. Phasellus tincidunt erat eu sodales semper. Donec sed lorem ut dui lobortis feugiat non at metus. Sed volutpat tortor vitae purus cursus, ut vehicula orci hendrerit. In ac metus ut massa fringilla. lorem ut dui lobortis feugiat non at metus. Sed volutpat tortor vitae purus cursus, ut vehicula orci hendrerit. In ac metus ut
    </div>

    <div class="masonry-columns">
    <h2>4th Masonry</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget fringilla ante. Phasellus tincidunt erat eu sodales semper. Donec sed lorem ut dui lobortis feugiat non at metus. Sed volutpat tortor vitae purus cursus, ut vehicula orci hendrerit. In ac metus ut massa fringilla. lorem ut dui lobortis feugiat non at metus. Sed volutpat tortor vitae purus cursus, ut vehicula orci hendrerit. In ac metus ut massa fringilla porttitor. Aenean vitae sapien rutrum, rutrum enim varius, elementum magna.
    </div>

</div>

CSS

html, body{height:100%}


.masonry{
    clear: both;
    margin: 0px auto;
    padding: 20px 20px 0px;
    position: relative;
    width: 900px;
    z-index: 9;
    background-color:salmon;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-box-sizing:border-box;
    height:100%;
}

.masonry-columns{
    display: inline-block;
    list-style: none outside none;
    margin-bottom: 20px;
    padding: 20px;
    width: 100%;
    -moz-box-sizing:border-box;
    background-color:teal;
    float:left;
    direction:ltr
}
clestcruz
  • 1,081
  • 3
  • 31
  • 75
  • This is what masonry is designed to do, and it is happening because the 2nd and 3rd items are quite a bit smaller then the 1st and 4th. I would recommend playing around with min-height. As it is a screen shot i cannot give you an exact pixel value, but if i had to guess i would say around 300px so try adding min-height:300px; to '.masonry-columns' – rubo123 Jun 16 '14 at 02:02
  • Tried adding min-height on .masonry-columns no luck. – clestcruz Jun 16 '14 at 02:37
  • As mentioned you may need to play around with value, did you try that? – rubo123 Jun 16 '14 at 02:40
  • yes I did that a while go. I tried putting a min-height of 280px on .masonry-columns and the fourth box went below the third box and not below the first box. Looks like i have to use jquery If i ever want to achieve the layout i desire – clestcruz Jun 16 '14 at 03:16

0 Answers0