Fixed width css variable height grid

Question

How can we achieve a fixed width and a variable height in a grid layout, just like the www.pinterest.com layout of the main page. I think they use Javascript. just wondering if other approaches exist. just using float:left will not work. Thanks for any help.

Answer 1

The easiest option is to use the jQuery Masonry plugin.

If you want to do this only with CSS, you will have to float large columns with the same width, and then add variable height elements to them.

 <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> <div class="parent"> <div class="child"></div> <div class="child"></div> </div> 

And CSS will look like this:

 .parent { float: left; width: 200px; /* adjust as needed */ } .child { /* these are variable height */ } 

Answer 2

Perhaps you can use the css3 cloumn-count property as an alternative. Like this:

 .three-col { -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; } 

Read this article http://css-tricks.com/seamless-responsive-photo-grid/

Check this out e.g. http://jsfiddle.net/pMbtk/55/