我有一個(gè) css 網(wǎng)格，我希望其列寬度為該列中最大項(xiàng)目的寬度或 100px，以較小者為準(zhǔn)。我認(rèn)為 minmax(max-content, 100px) 可能有效，但事實(shí)并非如此。在下面的示例中，窄列應(yīng)為 max-content（但為 100px），寬列應(yīng)為 100px（但為 max-content）。是否可以使用 css 網(wǎng)格來做到這一點(diǎn)？
.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>
1
0
0
在項(xiàng)目上使用max-width并保持列自動(dòng)寬度
.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>
