3
votes

I've realised that I can include parsys component to a page to allow content authors to add components on that place. Now when I was reading about responsive layout (responsivegrid) component, it seems like it's doing the same?

I am interested in the difference, what should be used and in which case. There's a lot more in AEM documentation about Responsive layout, then about parsys so if someone can explain me this in a simple way or with some examples, I would be grateful.

1

1 Answers

2
votes

Responsive behaviour across different view ports is the main difference between a parsys and layout container.

With parsys, you drag and drop components and the position of these components remains the same in all viewports. Take for example a tile component which is positioned horizontally for desktop viewports and you want it stacked vertically as the viewport decreases, with just the paragraph system, you would require CSS changes or a responsive framework like bootstrap to achieve this.

enter image description here

With layout container, you get responsive features OOTB where you can define the position of the component for different viewports in Layout mode.

enter image description here

I've just illustrated a very simple example here, the component comes loaded with lots of responsive features.

The sample content we.retail project has examples of layout container which you can use as ref, also Adobe documentation on this topic is pretty comprehensive.