Kevin Powell - Community•2mo ago

can't align the elements

https://codepen.io/etrbbr/pen/RNwRQzE try to write some text and you will see I can't align the elements. Look at the screenshot – at the end, they are either longer or larger, depending on the values at the end. any tips what i am doing wrong?

CodePen

Untitled

...

3 Replies

HelgiOP•2mo ago

okay i am not sure but i think i found solution i dont know if its correct though i put min-width for percent and looks like it work. is there any better way to do it?

Chris Bolson•2mo ago

any tips what i am doing wrong?

Using flex box for something that you don't want to be flexible 😆 I suggest you try with grid, something like this:

.letter-density {
  width: 100%;
  /*
  display: flex;
  align-items: center;
*/
  display: grid;
  grid-template-columns: 20px 1fr 80px; /* adjust first and last column to fit your requirements*/
  gap: 10px;
}

.letter-density {
  width: 100%;
  /*
  display: flex;
  align-items: center;
*/
  display: grid;
  grid-template-columns: 20px 1fr 80px; /* adjust first and last column to fit your requirements*/
  gap: 10px;
}

raw-power•2mo ago

remove the min-width from .percent

.percent {
  width: 50px;
  text-align: right;
}

.percent {
  width: 50px;
  text-align: right;
}

set a fixed width and the elements will line up

Gaming

Programming

can't align the elements

Did you find this page helpful?