Testimonials grid section main using CSS Grid
Solution retrospective
I am most proud of successfully implementing CSS Grid in a real-world project. It was my first time applying Grid to create a complex and responsive layout, and seeing the design come to life exactly as intended was very rewarding. The challenge helped me deepen my understanding of grid areas, row and column spans, and responsive adjustments.
Next time, I would spend more time planning the grid structure before coding to avoid some trial-and-error. Also, I would integrate more fluid units like minmax() and auto-fit earlier to make the layout even more flexible across different screen sizes
What challenges did you encounter, and how did you overcome them?The biggest challenge was mastering CSS Grid’s syntax and behavior, especially when positioning elements that span multiple rows and columns. Initially, some cards didn’t align properly or had inconsistent heights.
I overcame this by studying documentation, experimenting with different grid properties, and using browser developer tools to inspect the grid layout visually. I also sought examples and tutorials to understand best practices for responsive grid design
What specific areas of your project would you like help with?How to make the grid adapt smoothly between breakpoints without abrupt layout shifts.
Best practices for equalizing card heights dynamically without fixed heights.
Suggestions for combining CSS Grid and Flexbox efficiently inside cards for content alignment.
Any tips or code examples to improve these areas would be very helpful!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Asya0601
The work is almost identical to the layout, great job! I would only change the background color to Gray 100. As for smoothness, you can set the width of the container relative to the screen, so that when the screen resolution decreases, the container follows it in percentage terms. The width can be set differently at different intervals between breakpoints. Code example(mobile-first):
.main_container{ width:90%; }
@media(min-width:768px){ .main_container{ width:80%; } }
@media(min-width:992px){ .main_container{ width:70%; } }
@media(min-width:1200px){ .main_container{ width:60%; } }
In this case, you also need to adjust the height, for example, through the margin-block of the container.
Happy creating!😀👍
Marked as helpful
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord