Adjusting component position within layout container

[jakej40603950]

Is it possible to adjust position of a component within the assigned columns of a layout container i.e. either centralize it or move it to the left or to the right?

To elaborate, there are two components in the first row of a 4 column layout container. Say the first one is an image component which actually takes up only about 1.5 columns. By default it's left aligned which leaves a bit of space between the image component and the other component in the top row. Is it possible to centralize the image or right align it within the 2 columns assigned to it?

On a similar note, is it possible to adjust the distance of a component in the container from the left or right edges of the view-port?

Similarly possible to specify some gap between different rows of the grid?

Thanks for any help here.

[arunpatidar]

Hi,

For your case, you can create custom column control component like below and add more option to specify margins from left-right or/and top-bottom and also include alignment options in component.

Creating a custom Touch UI Grid Component for Adobe Experience Manager

[notyourcat · Accepted solution]

If you are talking about say, using columns 4-10 instead of 1-6, you can achieve this if you are using AEM 6.3 or newer as grid offset functionality is not available before that.

You just have to go to layouting mode and drag the left blue dot to the column you want the component to begin, and then readjust the amount of columns you want your component to take.

If you are talking about centering the content of your component in columns 1-6, then you need to do that via CSS of your component.