Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

set grid columns inside a Container component

Avatar

Level 3

Hi there,

 

I am wondering if it is possible to set AEM's 12 columns grid inside of a Container component?

 

The default behaviour on AEM Cloud only allows resizing on the remaining columns when we shrink the container, like the six columns below for the image component inside. But I want it to start with a new 12 columns inside the Container.

 

sean12341_1-1692088481155.png

 

 

Thanks

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hello @sean12341 

 

I guess what you are trying to achieve is:

Once you have resized a container to 6 column, you are trying to divide it again by 12. Such that the components inside it would resized by diving the resized container by 12.

 

That would not be possible. However, you can modify the default number of columns for the root container to greater than 12 and then adjust grid.less accordingly. 

Thus, the UI would be divided into more number of columns, allowing authors to resize components more precisely.

 

This article covers Responsive Grid in detail

https://blog.developer.adobe.com/customizing-the-aem-grid-3ff9c2121a36 

 


Aanchal Sikka

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

Hello @sean12341 

 

I guess what you are trying to achieve is:

Once you have resized a container to 6 column, you are trying to divide it again by 12. Such that the components inside it would resized by diving the resized container by 12.

 

That would not be possible. However, you can modify the default number of columns for the root container to greater than 12 and then adjust grid.less accordingly. 

Thus, the UI would be divided into more number of columns, allowing authors to resize components more precisely.

 

This article covers Responsive Grid in detail

https://blog.developer.adobe.com/customizing-the-aem-grid-3ff9c2121a36 

 


Aanchal Sikka