我有一個css網格，我希望它的列寬要么是該列中最大項目的寬度，要么是100像素，以較小者為準。我原以為minmax(max-content，100px)可能行得通，但事實并非如此。在下面的示例中，窄列應為最大內容(但為100像素)，寬列應為100像素(但為最大內容)。css grid有可能做到這一點嗎？

.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>

對項目使用最大寬度，并保持列自動寬度

.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>