Question

How can we achieve the fixed width and variable height in a grid layout, exactly like http://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

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 */
}