Skip to content
Submitted over 1 year ago

Results Summary Component

Lucas Araújo•40
@LucasSilvaAraujo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I'm unsure of the way I did to do spacing between the words and icons from the right part. I'm sure there's a better way to do this but idk how. Like, the actual space is proportional from the 3 parts because I'm using "space-between" from "justify-content", idk how to do a smaller space between the icon and text, and a bigger space between the text and grade. As a matter of fact, I'm actually know some ways to do, but I'm sure there are better ways, so I'm open to listen from community :V!

Community feedback

  • Ted Rinquest•440
    @climb512Posted over 1 year ago

    Looks great Lucas,

    For the spacing which you ask about, I decided to use grid-areas to solve this. I took inspiration from the old Bootstrap framework, where everything is in 12 columns. So what I did was this:

    .card {
display: grid;
gap: 4px;
grid-template-areas: "A B C C C C C C C C C D";
justify-items: end;
align-items: center;
}

    ...then for the icon, I just gave it grid-area: A; the word ("Reaction") gets grid-area: B; and the whole score (80/100) gets grid-area: C; Grid-area D is for margin on the right, while justify-items: end; takes care of margin-left.

    I'm interested to see how others do this too.

    Marked as helpful
    1
    Lucas Araújo•40
    @LucasSilvaAraujoPosted over 1 year ago

    @climb512 Actually I reposted my screenshot after I used a "margin-left" on the grade part to increase the space, but that's a interesting idea too, thanks!

    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