responsive grid frameworks - float: vs display: table-cell

Question

I've used Bootstrap, and researched Foundation. From what I've seen, both of them use float: to achieve responsive grids.

I've also seen responsive grids using only display: table-cell and @media queries.

The latter seems better to me because float: is intended to achieve a particular typographical effect, so using it to achieve responsive grid layout seems like a hack.

My question: is float: used by bootstrap, foundation and other responsive grids to get around the lack of proper table-cell support in older browsers? If there is another reason, I'd like to hear that too.

Answer 1

There are roughly 3 ways to make grid systems: float inline-block table-cell

They all have PROs and CONs. Bootstrap probably uses float because, being a framework, it adapts easily to different scenarios.

A big limit of the float method is that you can't vertically align grid elements, and personally I prefer using the inline-block method.

However, the inline-block method brings a problem of whitespace (because the grid items become kind of words) which can be fixed in various ways, as extensively explained by Chris Coyier:

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

The biggest problem with the table-cell method is, in my opinion, that you can only place grid elements in one row because you can't push them on a new line via CSS. This means that for each row you need a new container element, and it becomes very inflexible for responsive designs.

Answer 2

I agree with everything that gyo has written and would only add that I have found Pure grids (formerly YUI3 grid) to be an effective and cross-browser friendly application of the inline-block method. Interestingly, it also incorporates some of the aforementioned Flexible Box properties. However, a big win, if internationalization is a requirement, is that inline-block automatically reverses when dir="rtl" is set, unlike float-based layouts (not sure about table).