Skip to content
Submitted 6 months ago

Testimonials grid section using CSS Grid Layout responsive.

leodev•290
@hangtime319
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Testimonials grid section
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

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

In this project I used other grid layout functions to position the elements such as the grid-area. I'm proud to have learned this technique to apply to specific projects.

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

My biggest challenge was trying to fit the sections within the grid in the project order. With the grid area it was easier to do this. In the next projects, I will apply this function.

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

I would like help making the grid more responsive with less code.

Community feedback

  • Micha Huhn•200
    @MichaHuhnPosted 3 months ago

    Looks really good, well done!

    About your question:

    Frist we can start with the centering. I would structure the HTML in the following way:

    <body>
  <main>
    <ul class="testimonial-list"><ul>
  </main>
</body>

    An unordered list could be a good semantic HTML element for the testimonials, but it doesn't have to be a list. You can also use a div.

    We don't need margin or padding on the body, because we can handle centering in a different way as explained below.

    The main should span across the whole viewport as usual. This way we could change its background color for example. In addition, we can use the main for centering the testimonials like so:

    main {
  display: grid;
  place-content: center;
}

    place-content: center; centers everything horizontally and vertically.

    After that, we apply a max-width to the testimonials to prevent them from spanning across the whole viewport. In the Figma mockup it's max-width: 1110px;. For accessibility we can use max-width: 69.375rem;.

    We can remove grid-template-columns and grid-template-rows and use grid-auto-columns: 1fr; instead. This will create equal columns automatically when using grid-template-areas. The rows will also be created automatically.

    Finally, we can introduce a media query to make the site responsive. I did this challenge with a mobile-first approach. That means I wrote all the styles for the mobile view and then updated the styles for desktop with the help of a media query. In this case we can use this media query:

    @media (min-width: 68.75rem) {
  grid-template-areas:
    'one one two five'
    'three four four five';
  gap: 1.5rem 1.875rem;
}

    68.75rem is equal to 1100px. That's a good size, because there are not many devices in this area.

    On mobile you can stack the testimonials like so:

    grid-template-areas:
  'one'
  'two'
  'three'
  'four'
  'five';

    With this approach the grid layout adapts automatically and it also works on mobile through the media query.

    I hope that's a bit useful.

    Here is also a solution as a YouTube tutorial.

    0

Please log in to post a comment

Log in with GitHub

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