Skip to content
Submitted about 3 years ago

3 Column Card using HTML CSS & Grids

itcss
Devesh•120
@devesht21
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

what I can improve in terms of best practices?

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Account deleted

    Hi Devesh,

    The sites looks very good. An issue I saw was when the browser shrinks, the cards stay the same. I suggest you change your .card-container to be one column. You can do that by changing your grid-template-column to 1fr. From there, you can change your max-width so it doesn't cover the entire screen.

    Also, I believe you only use rem for font-size, not max-width. You would use em for that. For an explanation why, I suggest you google it.

    The only other thing I have to say is not considered best practice to use display: flex for your body. If you want to center your .card-container, then I would create a main tag above .card-container & change .card-container to a div tag. Then, put your display: flex & all its components within that main tag.

    I hope all that helps you.

    Marked as helpful

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