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

Answer 3

First, if you adjust your margin to be on all 4 sides it will space out a little better on the flow to new line.

Second, you can either specify a min-height that is closer to something common for all areas, or run JavaScript to set them to the same on a line given a particular width.

Answer 4

I don't think there is a way, barring javascript, to do this; my recommendation would be to set a defined height and maybe an overflow:auto so in the case that content does overflow it does not cripple your site and your readers can still see your content.

Answer 5

When you have more divs and thus more rows, without row-divs (container divs that mark a row), then the following example from CSS Tricks does what you need:

Equal Height Blocks in Rows

The following code has eight list items. When only three or four items are displayed per role, then the given example will make all divs equal in height per row.

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