CSS 网格列的 max-content 最小值和固定宽度

Question

我有一个 css 网格，我希望其列宽度为该列中最大项目的宽度或 100px，以较小者为准。我认为 minmax(max-content, 100px) 可能有效，但事实并非如此。在下面的示例中，窄列应为 max-content（但为 100px），宽列应为 100px（但为 max-content）。是否可以使用 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

在项目上使用max-width并保持列自动宽度

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