Responsive Testimonials Grid using Grid-Template-areas

What challenges did you encounter, and how did you overcome them?

Through out this project i struggled to make the grid more responsive for different screens. That's when i began searching for resources related to grid and found two solutions.

1st soultion - Example

.container { grid-template-column: repeat(auto-fill,minmax(min(250px,1fr))); } With this method we can automatically create colums and rows based on screen space and let grid automatically wrap to subsiquent rows. but for Style prefrences i decided to use the 2nd solution.

2nd solution - Example

layout 1 DESKTOP

.container { grid-template-areas: "a a b e" "c d d e"; } Layout 2 - TABLET

.container { grid-template-areas: "a d" "b c" "e e"; Layout 3 - MOBILE

.comtainer { grid-template-areas: "a" "b" "c" "d" "e"; } In this method by using grid-template-area with grid-auto-column: 1fr we can set the grid layout more easily. As well change how it looks for different screens by changing layouts manually.

What specific areas of your project would you like help with?

Any feedback related to creating Responsive grid-layouts will be appreciated.