Lebar minimum kandungan maksimum dan tetap untuk lajur grid CSS

Question

Saya mempunyai grid css dan saya mahu lebar lajurnya ialah lebar item terbesar dalam lajur atau 100px, yang mana lebih kecil. Saya fikir minmax(max-content, 100px) mungkin berkesan, tetapi tidak. Dalam contoh di bawah, lajur sempit hendaklah kandungan maksimum (tetapi 100px) dan lajur lebar hendaklah 100px (tetapi kandungan maksimum). Adakah mungkin untuk melakukan ini menggunakan grid css?

.table {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(4, minmax(max-content, 100px));
}

.element {
  background-color: lightblue;
  word-break: break-all;
  white-space: nowrap;
}

<div class="table">
  <div class="element">a</div>
  <div class="element">wiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiide</div>
  <div class="element">narrow</div>
  <div class="element">d</div>
  <div class="element">narrow</div>
  <div class="element">b</div>
  <div class="element">c</div>
  <div class="element">wiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiide</div>
</div>

Answer 1

Gunakan max-width pada item dan kekalkan lajur auto-lebar

.table {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(4, auto);
  justify-content: start; /* you need this to avoid the gap between column */
}

.element {
  background-color: lightblue;
  word-break: break-all;
  white-space: nowrap;
  max-width: 100px;
  /* hiding the overflow */  
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="table">
  <div class="element">a</div>
  <div class="element">wiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiide</div>
  <div class="element">narrow</div>
  <div class="element">d</div>
  <div class="element">narrow</div>
  <div class="element">b</div>
  <div class="element">c</div>
  <div class="element">wiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiide</div>
</div>