AEM Grid Column width | Community
Skip to main content
M
mvelicheti
Level 2
December 11, 2023

AEM Grid Column width

  • December 11, 2023
  • 1 reply
  • 1225 views

Hi,

 

I'm having 12 column AEM Grid system. We have a requirement to change the width of the column and to add a gutter space between the columns. Is it possible to do these changes and is it a best practise? Please answer.

 

Thank you!

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

1 reply

BrianKasingli
Community Advisor and Adobe Champion
BrianKasingliCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
December 11, 2023

I have worked on this problem for many projects. Using the AEM Layout Feature, it's impossible to add visibility of 30px gutters for each of the columns for the authors; so for example, column 1-12, you will only see. Solid-Transparent-Solid-Transparent-Solid-Transparent-Solid-Transparent-Solid-Transparent-Solid-Transparent.

As a solution for those project that I have worked on, we implemented 16px (margin or padding) for left and right for each and every component, and then once we are in mobile screens, the CSS will render the (margin or padding) eft and right to 8px. 
As you can previewing the page as "published" or even inside of editor.html, this trick will add an illusion that gutters are there. But yes, again you must add margin or padding for left and right, for each component. 

    M
    mvelichetiAuthor
    Level 2
    December 12, 2023

    @briankasingli Thanks for the reply. Can we atleast change the column width of the grid or do we consider not changing it?

      Terms & ConditionsAccessibility statement

      Loading footer...