AEM Grid - How to add spacing between columns in AEM grid

Viewed 935

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. Modifying the grid.less is an option that we are thinking of as last resort, but we would like to check if there is a declarative way from the AEM grid, for example specifying the spacing in some property.

1 Answers

There is no property for padding/margin in AEM grids by default, this is the reason we have grid.less file in place OOTB. But,you can edit and add a property in your templates for that.

Although, this is not the best approach

If you want to add default spacing in all the grids, you have to do it in grid.less.

This would be even worse, as these changes would be global

A Better Approach

I would suggest to create a spacer component instead of adding a default padding in all grids. That way, when you don't want padding in your grids you wouldn't get stuck again.

Content Authors can just add a spacer component(or multiple) in between different components depending upon the size of padding/margin you need.

Customizing AEM Grid

Related