Responsive grid inside a responsive grid

[#1]

Hello, is it possible to have a responsive grid component inside another? The goal is to have, for example, an image component with "Drag components here" over the image that allow to put add a text, button or any other component for further customization.

AEM version 6.3, responsive layout enabled. Looking at we retail, I note that the hero image and similar components offer the possibility to add a title and other options but in a single dialog.

[#2 · Accepted solution]

We can do it.

Did you check :- AEM– Grid System Examples – Markup  [Nested Grid]

Documentation link:- Responsive Layout

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.

[#3]

One thing you can look at doing here is to build a custom grid component using bootstrap. We have an example:

Creating a custom Touch UI Grid Component for Adobe Experience Manager

Now look here too - there is example of nested Bootstrap grid.

https://getbootstrap.com/docs/3.3/css/#grid