Submitted about 4 years ago

3 Column Card with HTML, CSS, GridBox

@jma26

A solution to the 3-column preview card component challenge

Solution retrospective

I decided to challenge myself to exclusively use CSS Gridbox to layout the card instead of relying on Flexbox. My understanding of how CSS Gridbox is better, but there are certain properties I'm still confused.

I had a hard time figuring out how to vertically center the cards on larger screens with just CSS GridBox. I ended up relying on using flexbox on the parent element, body, to center it. What is one of the ways to vertically center the .card container on desktop screens?

Any tips, suggestions, and feedback is welcome!

Thank you! #HappyCoding

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Jesse Ma'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