J'ai une grille CSS et je veux que la largeur de sa colonne soit la largeur du plus grand élément de la colonne ou 100 px, selon la valeur la plus petite. Je pensais que minmax(max-content, 100px) pourrait fonctionner, mais ce n'est pas le cas. Dans l'exemple ci-dessous, la colonne étroite doit avoir un contenu maximum (mais 100 px) et la colonne large doit avoir un contenu de 100 px (mais un contenu maximum). Est-il possible de le faire en utilisant une grille 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>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Utilisez
max-widthsur les éléments et conservez la largeur automatique des colonnes.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; }