How can I adjust AEM Grid System Gutter space and Column Width based on the UX design ? | Community
Skip to main content
akashkriz005
akashkriz005
Level 2
May 14, 2024

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

  • May 14, 2024
  • 3 replies
  • 1630 views

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 ? 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

3 replies

Madhur-Madan
Community Advisor
Madhur-MadanCommunity Advisor
Community Advisor
May 14, 2024

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
    akashkriz005Author
    Level 2
    May 14, 2024

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

      BrianKasingli
      Community Advisor and Adobe Champion
      BrianKasingliCommunity Advisor and Adobe Champion
      Community Advisor and Adobe Champion
      May 16, 2024

      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
        Community Manager
        kautuk_sahniCommunity Manager
        Community Manager
        May 16, 2024

        @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
        Terms & ConditionsAccessibility statement

        Loading footer...