I was playing with responsive css grids recently so I tried to make one of my own for new project. I decided to keep it fairly simple so I used display:inline-block property for my cells.
This would either require margin:-0.25em "hack" or removal of spaces between inline-block elements to counter last element skipping to a new line.
I decided for removal of white space between columns. It works excellent even in IE8, but for some reason latest Firefox acts as if there's white space in between.
Only explanation I can think of right now is that Firefox re-formats HTML code before rendering it and in that process adds new line after each </div> closing tag.
Here's my JS Fiddle
Thanks in advance!
[ANSWER]
I have forgot to put firefox prefix for box-sizing, and padding that served as spacing between columns made excess content because of that.
it's fixed by adding : -moz-box-sizing: border-box; to col elements.
After fiddling around with your code, the issue is the 10px padding. If you remove that line Firefox displays identical to chrome (I didn't test in IE).
Really it's probably an oversight on firefox's part. I wouldn't worry too much about it, as your page is still readable, albeit a bit ugly.
My suggestion if you're so inclined to fix it is to pad the cells "manually" by adjusting their relative positions.