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.