set grid columns inside a Container component | Community
Skip to main content
August 15, 2023
Solved

set grid columns inside a Container component

  • August 15, 2023
  • 1 reply
  • 1391 views

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.

 

 

 

Thanks

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by aanchal-sikka

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 

 

1 reply

aanchal-sikka
Community Advisor
aanchal-sikkaCommunity AdvisorAccepted solution
Community Advisor
August 15, 2023

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