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/

Answer 2

The easiest option is to use the jQuery Masonry plugin.

If you want to do it via CSS only, you have to float large, equal width columns and then add your variable height elements within 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 the CSS would look like so:

.parent {
  float: left;
  width: 200px; /* adjust as needed */
}

.child {
  /* these are variable height */
}