Skip to content
Submitted 7 months ago

Testimonials grid section with grid and flex

plantpirate•170
@plantpirate
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?

I'm glad I got my solution to even look close to the design. I'm most confident with how I placed the grid items. I don't know if making named grid areas is the best way to go, or by telling the grid items how many rows/columns to span,

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

Placing the grid. I tried using "place-content: center;" but I couldn't get that to work (I know there has to be a reason.) so I used the horizontal auto margin method instead.

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

I feel like I need to get better control of grid placement, any feedback for use in the future is appreciated.

Should these footers with copyright info ~always~ be placed at the bottom?

Community feedback

  • Lena•230
    @lenanle333Posted 7 months ago

    Hi friend!

    Your code gave me more insight on how to use grid-template-area so thank you! I feel like the way you used grid areas was very intuitive.

    To use place-content you need to set a display to the container like grid or flex!

    My go to method for centering containers is something like this

    container {
   display: flex;
   justify-content: center;
   align-items: center;
}

    I've been removing the footer completely... I just shout Frontend Mentor in my github. Hopefully I don't get in trouble for it [:

    However, good work dude!!

    Marked as helpful
    1
    plantpirate•170
    @plantpiratePosted 7 months ago

    @lenanle333 thank you! I will check soon to see if that was my problem :)

    I’ve noticed the grid-area method has things behaving a little bit more how I want them to.

    https://www.joshwcomeau.com/css/interactive-guide-to-grid/ This is the guide front end mentor recommends and it’s very helpful

    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