Before i started working with English Heritage, they already had an adopted system for their front end framework. This was a modified version of Foundation and used a 24 column layout rather than the usual 12 columns, which is more commonly found in the standard version of Foundation and Bootstrap.
This is an excellent idea because it gives much more control over your layout when designing or defining where UI elements should be positioned. As with all responsive layouts, its important to realise that whatever looks good on a desktop computer is not necessarily going to translate to the same experience on a mobile. For example using a 1 grid column margin on mobile looks great and whilst on a desktop computer, this would need to be increased to at least 2 columns and sometimes more dependent on design.
The grid layout can give complete control over how the design should translate between various device resolutions, such as; mobile, tablet, netbooks/notebooks, laptops and desktop computers. Also not forgetting the various display modes from portrait to landscape for mobiles and tablets.
As a general rule of thumb, i like to have the following structure across devices / computers:
