Testimonials Grid Section – Responsive with CSS Grid & Flexbox

What are you most proud of, and what would you do differently next time?

I'm most proud of how I managed to build this entire layout using CSS Grid, even though I mainly used Flexbox before. At first, I struggled with getting the grid layout right, especially making Daniel and Jonathan the same height and placing Kira correctly. But after some trial and error, I figured it out and got it looking really close to the original design.

If I had to do it again, I’d probably plan my grid structure better from the start instead of adjusting it later. Also, I spent way too much time tweaking small things like font sizes and spacing to match the reference exactly—next time, I’d try to work more efficiently instead of over-fixing details.

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

One of the biggest challenges was getting the grid layout to match the reference exactly. At first, I struggled with sizing the cards properly, especially making sure Daniel’s and Jonathan’s sections had the same height while keeping Kira’s section spanning the full height on the right. I tried different approaches, and at one point, my grid was completely broken.

Another issue was the quotation icon in Daniel’s section. At first, it was either too big, too small, or overlapping the text in a weird way. I had to tweak its positioning with absolute positioning and adjust the size until it looked right.

Overall, this challenge really pushed me to think more about grid structures and positioning, and I definitely feel more comfortable using Grid now.

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

Overall, I’m happy with how the layout turned out, but I feel like the sizing and spacing could be more precise. Even though I matched the design closely, I think some elements—like font sizes, padding, and overall proportions—aren’t 100% perfect. I’d love some feedback on how to improve the accuracy of my spacing and typography.