I have worked on this problem for many projects. Using the AEM Layout Feature, it's impossible to add visibility of 30px gutters for each of the columns for the authors; so for example, column 1-12, you will only see. Solid-Transparent-Solid-Transparent-Solid-Transparent-Solid-Transparent-Solid-Transparent-Solid-Transparent.
As a solution for those project that I have worked on, we implemented 16px (margin or padding) for left and right for each and every component, and then once we are in mobile screens, the CSS will render the (margin or padding) eft and right to 8px.
As you can previewing the page as "published" or even inside of editor.html, this trick will add an illusion that gutters are there. But yes, again you must add margin or padding for left and right, for each component.
