Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Nested Responsive Grid


Level 4

Reviewing the information about the AEM6.1 Responsive Grid, and 

Slide 11 indicates that when nesting layout containers, the number of columns should be fixed and not reset. But in my attempts at this, the nested layout containers show 12 columns even though the container is nested and set to 8 columns with respect to the parent. The customization applied wraps the responsivegrid in a section tag to apply a background color to the section.

<section class="${properties.themeColor ? properties.themeColor : ''}-bg"> <section data-sly-test="${properties.bgOptions != 'none'}" class="${properties.themeColor ? 'section-bg': ''} ${properties.bgOptions}"> <section class="${properties.wrapper? 'container' : ''} ${properties.innerOptions}"> <div data-sly-resource="${'responsivegrid' @ resourceType='wcm/foundation/components/responsivegrid'}"> </div> </section> </section> <section data-sly-test="${properties.bgOptions == 'none'}"  class="no-outer-bg ${properties.bgOptions}"> <section class="${properties.wrapper? 'container' : ''} ${properties.innerOptions}"> <div data-sly-resource="${'responsivegrid' @ resourceType='wcm/foundation/components/responsivegrid'}"> </div> </section> </section> </section>
6 Replies


Level 4

Thanks! That will be a good reference. The difference in this case is that I was trying to add section tag around the responsivegrid component to style the background color on the margins outsides of the grid container. It was really only needed on the outermost one. So the problem was basically fixed for the nested layout container components by adding the non-customized Layout Container instead on mine (which was adding section tags wrapping the responsivegrid component


Community Advisor

I dont see you defining the nested grid in the above piece of Code. Where have you grouped 8 columns here ??

refer slide #29 here to achieve the nested grid.


Level 4

The responsivegrid component (Layout Container) can be dropped into the responsivegird like a regular component. This is what I am referring to as a being 'nested.'