Any good way to set margin: 0 auto on author-editable responsive container?

[ky940819]

Does anyone know any good way to use the margin trick for the layout grid in a responsive container?
What I mean is doing something like this:

.cmp-container {
  width: 1000px;
  max-width: 100%;
  margin: 0 auto;
}

This makes the container at most 1000px, and centered.
The automatically generated wrapper div (parent of .cmp-container) is full-width of the page.

The issue is that if this container is in responsive mode, the column snap lines are the width of the parent component (i.e. 100% viewport width, in this case). This will not line up with the content, making it impossible to author.

The goal here is to be able to constrain the content of the container to the centermost 1000px of the screen; but be able to apply a class to the wrapper div to set the background to a certain colour to achieve a banding effect for different sections of the page.

I can come up with some workarounds, but they aren't pretty.
I suspect someone has had to do something like this before, so does anyone know a way to force the author layout editing columns to match up with the available content width of the container items, instead of the content width of the auto inserted wrapper div?

Thanks.

[CezCz]

Hi Kyle,

First of all it is important to get into "Responsive Grid is a blackbox" thinking. This way we do not depend on anything from it and when it changes we do not suffer. This means that we should either embed ourselves inside of the RG or wrap it. Unfortunately a common, however potentially very harmful approach, is to "try to live" alongside with RG (in the same node), such pattern is strongly unadvised.

The snaplines and stripes, these are attaching and drawing based on the overlay size which is based on the editable itself.
That means if you can manipulate "reported" size of the editable (i.e embed the editable node inside this .cmp-container wrapper) it will paint just the way you want it.

So my suggested answer is to do something like this:

.cmp-container-parent <- this is static wrapper
.cmp-container <- this is editable
.responsive-grid <- this will span inside the cmp-container

If the editable margin is the thing expanding the overlay size please consider different means than margin: auto.
For instance
https://stackoverflow.com/questions/42121150/css-centering-with-transform
https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically

Please let me know if I there are any more questions.