Interactive Rating Component using CSS-Grid

Community feedback

• 

  Chris•240

  @ChristopherParkePosted over 2 years ago

  the easy way to center the numbers is to put them into a container and give it: .container { display: flex; justify-content: space-evenly; }

  and it's done.

  1

  ---

  

  Wyatt•80

  @00WyattPosted over 2 years ago

  @ChristopherParke thanks for the suggestion. I am still having an issue with vertical alignment. The numbers still have some kind of space underneath in their spans, that I can't seem to remove.

  0

  

  Chris•240

  @ChristopherParkePosted over 2 years ago

  @00Wyatt They seem to be vertically algined by:

  .card__layout { display: grid; gap: 24px; } you could remove the gap and space them using align-items: space-evenly.

  Just remember:

  • algin-* is the Y axis
  • justify-* is the X axis

  0

  

  Wyatt•80

  @00WyattPosted over 2 years ago

  @ChristopherParke actually I think it might just be that text sometimes has space underneath for characters that hang below the baseline. I just noticed it was visually affecting the vertical centering of the numbers (they sit on the baseline) by a couple of pixels haha

  0