UL+CSS for grid layout

Question

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

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 2

Option 1: Give them explicit heights

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

Answer 3

Inline blocks could perhaps be useful here.