Submitted 6 months ago

Testimonials grid section with grid and flex

plantpirate• 190

@plantpirate

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Testimonials grid section

HTML
CSS

2junior

View challenge

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

@lenanle333

Posted 6 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

plantpirate• 190

@plantpirate

Posted 6 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

Please log in to post a comment

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