Resizing snap to the grid for individual properties

[angelinek209805]

When a component is added to a page via the Layout Container, you can resize the component and the width will snap to the grid.

Similar if the component contains a data-sly-resource referencing to another component.

My question is, if is possible to have the same resizing snap to grid for a property added via cq:dialog. For example, a Hero component has a title, text, image, cta added via cq:dialog, I want to author to be able to resize each of the item individually. The reason is because if the title is too long and goes 2 line, 1st line has 6 words and 2nd line only has 2 words, the author could resize the title to be 8 columns to balance the word to 4 words each row without needing to use <br> to force a line break.

[arunpatidar · Accepted solution]

You can get grid column width and offset from cq:dialog and place items in row by using , you can use default width if nothing is supplies from dialog.

https://getbootstrap.com/docs/4.0/layout/grid/

https://getbootstrap.com/docs/4.0/layout/grid/#offset-classes

[angelinek209805]

Thanks, Arun. The idea was to use the AEM grid Layout to resize. But if is not possible had to go with cq:dialog settings.