Skip to main content
ArchR
Level 2
August 28, 2023
Solved

AEM Responsive Grid for 4 column images

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.
aanchal-sikka
aanchal-sikkaAccepted 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
View in thread

2 replies

Saravanan_Dharmaraj
Community Advisor
Saravanan_DharmarajCommunity 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.

Translate
    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

    Translate
    Aanchal Sikka
      Terms & ConditionsAccessibility statement

      Loading footer...