How can I add gutters to AEM grid system?

Hi all,

I'd like to know how I can add gutter to the AEM grid system. The gutters will be varying in size (px) between 30px (larger screens) to 16px *mobile screens). And it should also be visible when resizing containers in Layout mode. For further context, I[m using the out of the box AEM-Grid CSS, so 12 grids in total.

I realize this might be more of a front end question and (more importantly) a novel question, but any help is appreciated. 

I've marked gutters spaces below:

Best, 
Mohammed.