AEM allows you to have a responsive layout for your pages by using the Layout Container component.
This provides a paragraph system that allows you to position components within a responsive grid. This grid can rearrange the layout according to the device/window size and format. The component is used in conjunction with the Layout mode, which allows you to create and edit your responsive layout dependent on device.
The layout container:
- Provides horizontal snap to grid, together with the ability to place components into the grid side-by-side and define when they should collapse/reflow.
- Uses pre-defined breakpoints (e.g. for phone, tablet, etc.) to allow you to define the required behavior of content for related devices/orientation.
- For example, you can customize the component size or whether the component can be seen on specific devices.
- Can be nested to allow column control.
The user can then see how the content will be rendered for specific devices using the emulator.