This is difficult for me to articulate, so I'll do the best I can.
I want to extend the layout component to add some additional properties (BG color, ability to provide an anchor, etc). The tricky part I am running in to is I want the component to extend 100% of the viewport, but the inner content to have a max-width. However, I want the responsive grid to only be contained within that max-width, and not the width of the entire component. I've illustrated it the best I could in the attached screenshot.
The entire layout component is the red background, but the text component inside, which is conforming to the max-width, is bound to the layout's 100% width grid. I would like for the grid to be contained inside of the 2 black lines.
Another approach is to actually have two layout containers. The outer layout container is the full-width w/ colored background and the inner layout container is a fixed-width (no background). The inner layout container will have the grids appropriately and you won't have to have some crazy CSS w/ negative margins. The downside is now you have to author two layout containers...
If possible I would try to do everything with the Style System. Supertyping the Layout container will mean you will have to maintain this custom component long term through upgrades, although having a background image might be difficult w/ Style System alone.