Why the inline-block on the .grid?

[ShaggyDude]

I see you are using inline-block on the grid with some negative letter-spacing stuff to remove extra space. Why not just use display:block? I have never seen this trick but, it seems to work fine. Can you point me to where you picked it up?

[leejordan]

inline-block has the most in common with flex in that an inline-block layout gives you the ability to align elements vertically and horizontally. It made sense to use that as a fallback so that older browsers would still be able to have a mostly intact layout where flexbox is not supported.

Here's an explanation that gives a bit more info: http://www.lendmeyourear.net/layering-css-so-we-can-use-flexbox-now.html

As for the letter-spacing hack I chose that because in my opinion it is the most reliable hack for inline-block layouts for removing white space between elements. No hacks are ideal obviously but for me it's the one that works the best across as many browsers as possible.

This letter spacing hack was used in the Yui grid which is where I learnt about it: http://yuilibrary.com/yui/docs/cssgrids/