CODEWITHSUNDEEP
csscss-grid
Nadia
Nadia

Reputation: 122

CSS grid - 1fr col keeps getting cut-off

I can't get this css grid to do these 2 things..

  1. Value column should always show the entire string, not wrap, and not overflow
  2. 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;

enter image description here

Upvotes: 0

Views: 1137

Answers (1)

Rado
Rado

Reputation: 739

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>

Upvotes: 1

Related Questions