fixed width variable height grid css

Question

How can we achieve the fixed width and variable height in a grid layout, exactly like www.pinterest.com homepage layout. I think they are using Javascript. just wondering whether there are other approaches. simply using the float:left will not work. thanks for any help.

Answer 1

May be you can use 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 for example http://jsfiddle.net/pMbtk/55/