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.
smacdonald2008 - I'm simply setting my component with a superType to 'wcm/foundation/components/responsivegrid' and creating a separate java model for my new component to account for any new properties I'll be adding.
gauravb10066713 - The issue is less with how to achieve it from a CSS perspective, but more how can I set what gets controlled by the responsive grid. When I set the max-width on the inner responsive grid parsys, I want the grid to be set to that, as opposed the parent container, which is 100% width