Skip to content
Submitted over 4 years ago

Testimonial grid: CSS grids, BEM, SASS,

Jessica Strachan•160
@JessicaStrachan
A solution to the Testimonials grid section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Any feedback on the use of CSS grids would be appreciated! Could I have avoided the use of a grid within a grid here? Could the basis of the grid be more flexible and therefore less layout adjustments in the media queries? TIA!

Code

Please log in to post a comment

Log in

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hey, Jessica Strachan! 👋

    Good work on this challenge! Your solution looks good and responds rather well! 👏

    You can definitely only use once CSS grid for this challenge (and that would probably be preferred), by adding some rows to your grid using grid-template-rows property. Then, you can use the grid-row property for each CSS grid child element to specify which row it should be in (it works just like grid-column). You can make the white testimonial box on the far left span all of the rows of your grid by adding grid-row: 1 / -1; to it.

    Also, you can experiment with the auto-fit and auto-fill CSS grid properties to create a responsive grid without any media queries, but it might not be a bad idea to use one or two media queries to manually change the layout of the grid in a simpler challenge like this. 😉

    Keep coding (and happy coding, too)! 😁

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