Responsive grid inside a responsive grid | Community
Skip to main content
ronnyfm
New Participant
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

kautuk_sahni
kautuk_sahniAccepted solution
Employee
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
smacdonald2008
New Participant
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