How to add spacing between columns in AEM grid | Community
Skip to main content
March 2, 2021
Solved

How to add spacing between columns in AEM grid

  • March 2, 2021
  • 2 replies
  • 2376 views

We are on 6.5.3. Like in CSS/bootstrap, there is a property to add the spacing between grid columns. I would like to know if there is any way to achieve this in AEM Grid? We need to add some gaps to ensure content doesn't stick together when content is placed inside the column grids.

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 BrianKasingli

@17426058,

In a clean AEM project, you can manipulate the clientlib-grid/less/grid.less. Take a look at the latest AEM maven archtype project, https://github.com/adobe/aem-project-archetype/tree/98f3b4efa9834437881b31a336459abe6a89ad00/src/main/archetype/ui.apps/src/main/content/jcr_root/apps/__appId__/clientlibs/clientlib-grid/less

 

2 replies

BrianKasingli
Community Advisor and Adobe Champion
BrianKasingliCommunity Advisor and Adobe ChampionAccepted solution
Community Advisor and Adobe Champion
March 3, 2021

@17426058,

In a clean AEM project, you can manipulate the clientlib-grid/less/grid.less. Take a look at the latest AEM maven archtype project, https://github.com/adobe/aem-project-archetype/tree/98f3b4efa9834437881b31a336459abe6a89ad00/src/main/archetype/ui.apps/src/main/content/jcr_root/apps/__appId__/clientlibs/clientlib-grid/less

 

March 4, 2021
Hi @briankasingli - yea, this is the option we have kept as last resort. But we would like to check if there is a declarative way from AEM grid, for example specifying the spacing in some property.
Vijayalakshmi_S
Level 10
March 4, 2021

Hi @17426058,

.generate-offsets from the file /libs/wcm/foundation/clientlibs/grid/grid_base.less has the related definition. (This file is imported to our grid.less file)

See if you can make use of this in grid.less file based on your need.