Responsive grid inside a responsive grid | Community
Skip to main content
ronnyfm
Level 4
February 26, 2018
Solved

Responsive grid inside a responsive grid

  • February 26, 2018
  • 2 replies
  • 2809 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by kautuk_sahni

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.

2 replies

smacdonald2008
Level 10
February 26, 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

kautuk_sahni
Community Manager
kautuk_sahniCommunity ManagerAccepted solution
Community Manager
February 27, 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.

Kautuk Sahni