I am attempting to create an attractive layout for a series of equally-sized boxes. The number of boxes will vary. The idea is to flow the boxes into rows and columns to fill up a container; container size varies with the size of the web browser's window. Normally, you can do this easily with a `float: left;` for each of the boxes. Here is the wrinkle: I would like to have the last row, if it is uneven, be centered.

Example: Thirteen boxes. Three rows of four boxes, with the thirteenth box centered within the fourth row.

![](https://i.imgur.com/UTJYHgH.jpg)

I'm almost positive this has leaped far out of the realm of CSS, even CSS3, but I was wondering if there were Javascript libraries or at least well-known algorithms for handling this kind of thing. I have some very brute force ideas about it but my guess is that someone else has already done this in a more elegant fashion.

Even something like being able to pick out a given box's row and column would be a great start.