The problem with floats

The problem with using CSS floats comes when you have grid elements of varying, or unpredictable height. In the example below, the divs should line up in a 4-column grid, but because the first item in column 3 is too tall, what should be the bottom item in column 1 actually gets stuck behind the too-tall top item from column 3. Now the alignment on the second and third rows is all messed up.

Using display: inline-block instead

Fortunately, there’s another method we can use to get our grid lined up the way we want it–display: inline-block! The only catch is that inline-block elements natively render with a small space between each item. So if you want to use exact measurements for your grid, 25% width for each item in a 4-column grid, you’ll notice that the last column drops to form a new row because of the space added between the inline-block elements.

There are a number of ways to get rid of this space, but I think most of them are a bit too hack-y to be ideal solutions. It seems like the easiest solution is to remove the whitespace between elements in the HTML, e.g., <li>A list item</li><li>A second list item</li>

Getting it just right

However, if your grid elements are dynamically generated, it may not always be possible to create this HTML structure. Therefore, my personal favorite method to remove the whitespace is to apply a negative margin around each grid element. By default, the added whitespace is about .25em wide. So, I just apply margin: 0 -0.125em; to each grid element, and, voilá, the grid looks just right!

With inline-block, we can also vertically-center any dangling items. Say, for instance, your last row only has 3 items. If it suits your design, you can easily center those 3 items in the row by applying text-align: center to the parent container. Ultimately, if you’re going to have elements that vary extremely in height, you might also want to use the Masonry Javascript plugin to avoid big, uneven gaps in the vertical rhythm.