AEM Responsive Grid for 4 column images | Community
Skip to main content
Level 2
August 28, 2023
Solved

AEM Responsive Grid for 4 column images

  • August 28, 2023
  • 2 replies
  • 733 views

Hi Team, i am trying to recreate the four column images in desktop view and images wrapped into 2 rows like 2 images in first column and 2 images in second row..
 can we achieve this with the responsive grid layout in aem or with style systems?

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 aanchal-sikka

@archr 

 

You can utilize the layout + responsive grids to have different layouts for different devices.

- 4 images in a row for desktop

- 2 images in 2 rows for tablet

 

Example is explained on https://www.youtube.com/watch?v=n4lPKQmmRSc

 

Same class will be applied in all modes via Style system. Hence, use it to further fine tune the UI based on breakpoints

2 replies

Saravanan_Dharmaraj
Community Advisor
Community Advisor
August 29, 2023

@archr You can actually test it out in responsive grid layout as explained in below article

https://www.velir.com/ideas/2022/11/29/how-aem-puts-responsive-design-in-your-hands

or you can write custom css to different form factors.

aanchal-sikka
Community Advisor
aanchal-sikkaCommunity AdvisorAccepted solution
Community Advisor
August 29, 2023

@archr 

 

You can utilize the layout + responsive grids to have different layouts for different devices.

- 4 images in a row for desktop

- 2 images in 2 rows for tablet

 

Example is explained on https://www.youtube.com/watch?v=n4lPKQmmRSc

 

Same class will be applied in all modes via Style system. Hence, use it to further fine tune the UI based on breakpoints

Aanchal Sikka