Skip to content
Submitted almost 3 years ago

CSS Grid Only - NFT Preview Card Component

Josh•100
@Joshua-Farr
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

CSS Grid Experts, I need your help!

The only thing that tricked me was justifying the time remaining to the right. For some reason when I moved it over, there was extra space in the container and it would leave an unsightly gap between the text and the clock icon. Any insights would be greatly appreciated!

Community feedback

  • Simone•170
    @Giulo25Posted almost 3 years ago

    Hi Josh, you can set the two grid items (info1 and info2) as flexbox, then set info1 justify-content: start and info2 justify-content: end and you can manage the space between the icon and text with the gap property

    2
    Sameh•430
    @SamehCodePosted almost 3 years ago

    @Giulo25 it seems ur world class programmer . i hope i be like you once.

    0
    Josh•100
    @Joshua-FarrPosted almost 3 years ago

    @Giulo25 thanks for the feedback - I know how to do it with flex box- wanted to try my hand at doing it with grid (i know not as efficient!).

    0
  • Sameh•430
    @SamehCodePosted almost 3 years ago

    nice work, josh. i really appreciate your hard work iam just a newbie. wish me good luck , bro

    0
    Josh•100
    @Joshua-FarrPosted almost 3 years ago

    @SamehCode You got this, let me know if you have any questions, always happy to help out a fellow coder!

    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