Responsive grid inside a responsive grid

Avatar

Avatar

ronnyfm

Avatar

ronnyfm

ronnyfm

26-02-2018

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.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

kautuk_sahni

Community Manager

Total Posts

5.8K

Likes

1.0K

Correct Reply

1.1K

Avatar

kautuk_sahni

Community Manager

Total Posts

5.8K

Likes

1.0K

Correct Reply

1.1K
kautuk_sahni
Community Manager

26-02-2018

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.

Answers (1)

Answers (1)

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K
smacdonald2008

26-02-2018

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