Ted Rinquest• 440
@climb512
Posted
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
@LucasSilvaAraujo
Posted
@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
