Core Components - Container | Grid Question

[#1]

When using the Core Component "Container" is there a way to restrict the width of the content area, which in turn, will affect the width of the AEM Layout Grid?

See attached screens for current vs. desired results:

vs.

This can currently be achieved by placing one container in another container, but that is not elegant/ideal. The width is being set by putting "max-width:1200px" on the .cmp-container class.

Any thoughts or suggestions would be appreciated!

[#2]

yes, you can do it with CSS only.

use parent class to restrict container size.

e.g.

body.page-class-name{

max-width:1200px;

}

[#3]

Hi Arun,

One thing I am trying to accomplish, however, is the ability to have the background color/image of the Container component span 100% the width of the page, but constraining the content area to 1200px, along with the Layout grid.

The top image is just setting the content area to 1200px, but doing that does not constrain the grid. Only by placing another container inside of that max-width:1200px content area is the Layout grid constrained.

Does that make sense?

[#4]

Hi,

OOTB, the CSS rules for Grid are written, if we add components inside a responsive grid then only CSS rules will be applied to set the width. You can update or write rules to apply the same within the container as well.

e.g.

.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--12

[#5]

Hi Arun,

The problem with the Container seems to be that in order for the background to extend 100% of the page, the Container component itself needs to do the same, and since the root layout container is controlling how the grid gets laid out, the grid overlays on the Container, at 100% the width of the page. Any time I try to override, it does not take the changes. See screenshots. As you can see, I want the Grid to be overlayed on the 'cmp-container__content' div and not 'cmp-container'

.cmp-container{

    .cmp-container__content{

        &.responsivegrid.aem-GridColumn.aem-GridColumn--default--12{

            @media (min-width: $screen-sm-min) {

                 max-width: $container-sm;

             }

             @media (min-width: $screen-md-min) {

                 max-width: $container-md;

              }

             @media (min-width: $screen-lg-min) {

                 max-width: $container-lg;

              }

              margin:0 auto;

        }

    }

}