AEM Responsive Grid for 4 column images

[ArchR]

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?

[Saravanan_Dharmaraj]

@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 · Accepted solution]

@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