This is a bad idea!

[wendeavontuur]

grid-gaps can't be wider than a single column!

If you have a nice gap-width of 10px and you still want to have for example a 2 column lay-out on mobile you're out of luck.
example A, your grid width is 960px (small desktop size):
width of a column (width gapwidth): 960 / 60 = 16;
width of column minus gapwidth: 16 - 10 = 6px;
60x6 + 60x10 = 960px
No problems here.

example B, your grid width is 360px (mobile size)
width of a column (width gapwidth): 360 / 60 = 6;
width of every column: 360/60 = 6px;
width of column minus gapwidth: 6 - 10 = -4px;

oops!

This is what happens:
the column can't be negative so it's set to 0px, so the total width of the grid now is:
60x0 + 60x10 = 600px

[vladocar]

Yes it's true. That is why I have @media (max-width: 600px) .. The purpose of this project was to test the limits of the grid layout and offer alternative solutions.

[wendeavontuur]

maybe add something about this in your (very funny) description?
Because I just found out in the middle of a project!