CSS grid - 1fr col keeps getting cut-off - css

Question

I can't get this css grid to do these 2 things..
Value column should always show the entire string, not wrap, and not overflow
The hearts column should always stay lined up vertically
Here's an explanation of the problem in an image:
I've been working on this for too long, thank you for helping me!!! <3
Codepen simplified down: https://codepen.io/naaadz/pen/OJQZvgB
This is what I have to start with:
grid-template-columns: auto 150px auto 1fr;

Answer 1

I am not sure that it is possible with your current HTML structure.
If you change the grid element to hold your columns, you can achieve it.
Currently, you are having a lot of grids with a single row.
Below is an example of what I mean.
You can change the first column width to auto.
I saw that you are limiting it to 150px, so I used the minmax() property.
.box {
width: 300px;
background: lightgray;
overflow: hidden;
display: grid;
grid-template-columns: minmax(40px, 150px) 1fr;
gap: 10px;
padding: 3px 5px;
align-items: center;
}
.item {
display: flex;
align-items: center;
}
.font-icon {
margin-right: 10px;
}
.value {
text-align: right;
white-space: nowrap;
}
.truncate {
display: -webkit-box !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
word-break: break-all;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="box">
<div class="item">
<i class="font-icon material-icons">circle</i>
<span class="name truncate">Some value here</span>
</div>
<div class="item">
<i class="font-icon material-icons">favorite</i>
<span class="value item-right">16,000 UNITS</span>
</div>
<div class="item">
<i class="font-icon material-icons">circle</i>
<span class="name truncate">Some longer value here longer</span>
</div>
<div class="item">
<i class="font-icon material-icons">favorite</i>
<span class="value item-right">33,000 PPL</span>
</div>
<div class="item">
<i class="font-icon material-icons">circle</i>
<span class="name truncate">Some other value</span>
</div>
<div class="item">
<i class="font-icon material-icons">favorite</i>
<span class="value item-right">23,000,000 PPL</span>
</div>
</div>