How to obtain a grid of equal height list items?

Question

I am trying to do a grid of products using list items and inline-block. The problem is: the content of the blocks have variable heights and the inline-block doesn't keep the heights equal.

The code:

#blocks ul{
  list-style-type:none;
  margin:0px;
  padding:0px;
}

#blocks li {
  display:inline-block;
  vertical-align:top;
  width:280px;
  background-color:#ff9933;
  padding:13px;
  margin: 0px 0px 20px 19px;
}

<div id="blocks">
    <ul>
       <li>...</li>
       <li>...</li>
       <li>...</li>
    </ul>
</div>

Here's an image to illustrate the issue.

I need the blocks to keep the same height of the larger blocks, independently of its content. Is it possible to make someting like this?

And finally: Sorry, english is not my mother language :)

Answer 1

1. Adding the following to the li CSS will mimic the image example you provided.

    height: 150px;
    min-height: 150px;
    overflow:auto;

2. Also, here are some other approaches:

• http://demo.smartnetzone.com/same-height-columns-using-jquery/
• http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/
• http://www.cssnewbie.com/equalheights-jquery-plugin/

Answer 2

There's a W3C candidate layout called "flexbox" that takes care of this problem and many others. To achieve the equal height boxes you would simply assign the property display: flex to the UL and display: block to the LIs inside it.

Example (CodePen)

It's not going to get you very far if you need to support older browsers :) but if you can get around that this method is easy and super cool.

Reference: A Complete Guide to Flexbox