Comment définir la largeur maximale d'une colonne dans la disposition de la grille CSS?

Question

Ce que je veux atteindre:

En utilisant CSS Grid Layout, d'avoir une page avec une colonne de droite dont la taille est dérivé de son contenu, mais seulement jusqu'à 20% de la largeur de la fenêtre.

Comment je pensais que ça marcherait:

div { 
 
    border-style: solid; 
 
} 
 

 
#container { 
 
    width: 300px; 
 
    height: 300px; 
 
    display: grid; 
 
    grid-template-columns: 1fr minmax(auto, 20%); 
 
}

<div id="container"> 
 
    <div> 
 
    some content 
 
    </div> 
 
    <div> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus eu leo ac ultrices. Vivamus ornare, orci sed pretium sollicitudin 
 
    </div> 
 
</div>

Il semble bien, mais quand je supprimer le contenu de la deuxième div, la colonne de gauche ne tombe pas:

div { 
 
    border-style: solid; 
 
} 
 

 
#container { 
 
    width: 300px; 
 
    height: 300px; 
 
    display: grid; 
 
    grid-template-columns: 1fr minmax(auto, 20%); 
 
}

<div id="container"> 
 
    <div> 
 
    some content 
 
    </div> 
 
    <div></div> 
 
</div>

Ma question:

J'avais l'impression que depuis minmax()

(...) définit une plage de taille supérieure ou égale à min et moins de ou égal à max.

cela signifierait que dans mon cas, la largeur est définie à partir de auto (= 0div lorsque le vide est) à 20%. Il reste cependant à 20%. Pourquoi est-ce vrai?

Answer 1

Vous avez mal compris la fonction minmax. Il essaie d'abord d'appliquer une valeur maximale et quand ce n'est pas possible, il s'applique au minimum.

Donc, pour vous vous fixer la mise en page suffit pour calculer 20% de la largeur de votre récipient et appliquer ensuite à l'aide max-width propriété pour vous élément de grille et utiliser auto dans la définition de la propriété grid-template-columns pour la deuxième colonne. Démo:

div { 
 
    outline: 1px dotted gray; 
 
} 
 

 
.container { 
 
    width: 300px; 
 
    height: 300px; 
 
    display: grid; 
 
    grid-template-columns: 1fr auto; 
 
} 
 

 
.container > :nth-child(2) { 
 
    max-width: 60px; /* 20% x 300px */ 
 
}

<div class="container"> 
 
    <div> 
 
    some content 
 
    </div> 
 
    <div> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus eu leo ac ultrices. Vivamus ornare, orci sed pretium sollicitudin 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div> 
 
    some content 
 
    </div> 
 
    <div></div> 
 
</div>

Answer 2

Vous devrez peut-être définir max-width sur le conteneur lui-même et laisser sa colonne définie sur auto.

div, 
 
aside { 
 
    border-style: solid; 
 
} 
 

 
#container { 
 
    width: 300px; 
 
    height: 300px; 
 
    display: grid; 
 
    grid-template-columns: 1fr auto; 
 
} 
 

 
aside { 
 
    max-width: 60px; /* 60px is 20% of 300px*/ 
 
    /* max-width:20%; 20% of window's */ 
 
    font-size: 0; 
 
    transition: 0.25s; 
 
} 
 

 
#container:hover aside { 
 
    font-size: 1em; 
 
}

<div id="container"> 
 
    <div> 
 
    Hover it to see aside grow till 20% average width 
 
    </div> 
 
    <aside>lets give a try to resize it from content</aside> 
 
</div>