UL+CSS for grid layout

Question

Hi all,

I have a server-generated html like:

<ul>
    <li><!-- few nested elements that form a block --></li>
    <li><!-- few nested elements that form anaother block --></li>
    <li><!-- etc, X times --></li>
</ul>

All blocks have known width 200px and unknown height. I want <li> to be arranged in table-like fashion like this:

What I have for now is following css:

li {
    display: block;
    width: 200px;
    float: left;
    margin: 10px;
}

All is fine except that columns don't get equal height. And in example above block #4 “snatch” at #1 and the result isn't what I'm trying to achieve:

Is there any pure-CSS cross-browser way that will allow grid layout I want and will not enforce markup change?

Answer 1

Option 1: Give them explicit heights

Options 2: Use nth-child (which has limited support)

Answer 2

In your example you seem to want to give each row the same height of the largest li in that row. If this height is variable what you want is only possible with nth-child:

li:nth-child(3n+0) { clear: left; }

Answer 3

Inline blocks could perhaps be useful here.