Question

I’m looking into creating a set of css grid classes for webkit only browsers. Should be simillar to blueprit/bootstrap/compass, however I’d rather not use those because they rely on float positioning.

I’d like something like this:

span-1 {width:10%;display:inline-block}
span-2 {width:20%;display:inline-block}

and so on. Would there be any benefit to using display:table-cell vs inline-block for this? Or is there a better approach?

Answer 1

Actually display: table is really the solution you are probably looking for (because of your target browsers). It was added to browsers so people could get a grid layout without needing to use a table. You don’t even need percentages (the number of columns you add will dictate the width of the children elements).

DEMO

The only real caveat comes in when you are doing mobile browsers and want a dynamic layout shift (media tag) to go from a horizontal list to a vertical list. I guess it is not too big of a deal to add you own media tags (and add a class to the wrapper)…

You probably could get display: inline-block working but make sure you use box-sizing: border-box because when you are working with percentages, even a single px off and things start wrapping..