How to lay-out list items like a grid with CSS and HTML?

Question

I have a div block which does not have a fixed width.

Inside, I have an

• ..
block with 11 items. I would like these

Answer 1

The simplest solution is to use CSS columns:

http://jsfiddle.net/6tD2D/ (prefixes not included)

ul {
    columns: 3;
}

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
    <li>j</li>
    <li>k</li>
</ul>

This will equalize the columns as best it can. However, if there aren't enough elements to be perfectly equal, it will start removing them from the right instead of the center.

Answer 2

The "Inline Blocks" link that Jordan posted is a great resource, particularly when it comes to older browser support. For quick reference for others landing on this page off of google, the basic css for creating a centered, inline-block grid is:

ul {
    margin: 0 auto;
    text-align: center;
}

li {
    display: inline-block;
    vertical-align: top;
}

Answer 3

According to this StackOverflow question, Inline Blocks may be just what you need.

Oh, and if you aren't implementing it already, be sure to look into CSS Grids, too. If you don't want to build a CSS grid yourself, this one is fantastic.