Skip to content
Submitted almost 4 years ago

3 Column Card with HTML, CSS, GridBox

Jesse Ma•95
@jma26
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

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

Log in

Community feedback

  • Account deleted

    There is a lot of ways to center elements in css, how about you check out this page.

    Btw your solution looks good.

    Keep coding👍.

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