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

[akashkriz005]

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 ? 

[Madhur-Madan]

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

[akashkriz005]

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

[BrianKasingli]

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
    }
}

[kautuk_sahni]

@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.