Grid layout section - Line-based placement with extended columns

Solution retrospective
I’m most proud of gaining more practical experience with the CSS Grid layout, particularly using line-based placement and extending items along grid lines. Additionally, I became more familiar with the BEM naming convention, which significantly helped in organizing CSS classes effectively.
Next time, I would explore using grid-template-areas
as an alternative method for arranging items within the grid.
One of the challenges was maintaining the Grid layout structure across a range of screen sizes while ensuring that each testimonial article remained visually appealing and had an acceptable width to fit its content. To address this challenge, I implemented the following approach:
-
Flexible Container Width: I set the width of the articles container (
.testimonials
) as a percentage, which allows it to adjust dynamically to different screen sizes: CSS .testimonials { width: 76.6%; } -
Adjusting Width for Medium Screens: For medium-sized screens where the content might feel too cramped, I increased the container width to make the articles more readable: CSS @media (max-width: 1160px) { .testimonials { width: 95%; } }
-
Switching to Normal Flow for Small Screens: I carefully observed the behavior of the Grid layout as the screen size decreased to identify the point where it no longer fit well. Once I reached this breakpoint, I decided it would be better to switch to a normal block flow to maintain readability and usability: CSS @media (max-width: 800px) { .testimonials { display: block; width: 86%; } }
Hopefully, this approach ensures a responsive layout, maintains well-spaced content, and adapts the design seamlessly across various screen sizes.
What specific areas of your project would you like help with?I would like an evaluation of the design's responsiveness across multiple screen sizes. Additionally, I seek feedback on how well the layout performs and renders across different browsers.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Mohammad-Moneer's solution.
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