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

How can I adjust AEM Grid System Gutter space and Column Width based on the UX design ?

Avatar

Level 3

Hi Everyone !

Is there any way to adjust AEM grid system based on the UX defined Grid layout ? Is this a recommend approach to adjust the column width and grid layout which is coming OOTB ? 

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

4 Replies

Avatar

Level 7

Hi @akashkriz005 ,

If the AEM Grid doesn’t fully meet your needs, you can customize it. Front-end developers can adjust the breakpoints available for authors by modifying the grid.less file

You can follow the below mentioned document
Understanding How to Use the AEM Grid | by Tiffany Olejnik | Adobe Tech Blog

Avatar

Level 3

Thanks for the response @Madhur-Madan . Will it cause any compliance issue in the future and will it cause any issue with responsiveness ?

Avatar

Community Advisor

I worked on this in the past, and what you would need to do is add padding-left and right on each and every component for example below. I have implemented this for multiple AEM customers, and their not going to be able to see the grids while dragging and dropping, but what they would see is the consistent while spacing around all components, when dragged and dropped on the page.

What really happens here is, when using the AEM layout grid, a component that is featured on a page will be wrapped with a parent div of .aem-GridColumn

 

 

.aem-GridColumn:not(.container) {
    padding: 0 8px
}

@media(min-width: 768px) {
    .aem-GridColumn:not(.container) {
        padding:0 16px
    }
}

 

 

 

Avatar

Administrator

@akashkriz005 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.



Kautuk Sahni