我有一个 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>
在项目上使用
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; }