I worked on this in the past, and what you would need to do is add padding-left and right on each and every component for example below. I have implemented this for multiple AEM customers, and their not going to be able to see the grids while dragging and dropping, but what they would see is the consistent while spacing around all components, when dragged and dropped on the page.
What really happens here is, when using the AEM layout grid, a component that is featured on a page will be wrapped with a parent div of .aem-GridColumn
.aem-GridColumn:not(.container) {
padding: 0 8px
}
@media(min-width: 768px) {
.aem-GridColumn:not(.container) {
padding:0 16px
}
}
