web-dev-qa-db-fra.com

Comment définir la largeur maximale d'une colonne dans CSS Grid Layout?

Ce que je veux réaliser:

Utilisation de CSS Grid Layout , pour obtenir une page avec une colonne de droite dont la taille est dérivée de son contenu, mais uniquement jusqu’à 20% de la largeur de la fenêtre.

Comment je pensais que cela fonctionnerait: 

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>

Ça a l'air bien, mais quand je supprime le contenu de la seconde div, la colonne de gauche ne s'effondre 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 inférieure ou égale à max.

cela voudrait dire que dans mon cas, la largeur est définie de auto (= 0 lorsque div est vide) à 20%. Il reste toutefois à 20%. Pourquoi est-ce?

htmlcsscss3units-of-measurementcss-grid
23
WoJ

Vous avez mal compris la fonction minmax. Il essaie d'abord d'appliquer la valeur maximale et lorsque cela n'est pas possible, il applique la valeur minimale.

Donc, pour corriger votre mise en page, il vous suffit de calculer 20% de la largeur de votre conteneur, appliquez-le à l'aide de max-width propriété pour votre élément de grille et utilisez auto dans votre grid-template-columns définition de la propriété 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>
14
Vadim Ovchinnikov

Vous devrez peut-être définir le max-width sur le conteneur lui-même et laissez 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>
7
G-Cyr

"La fonction fit-content accepte un paramètre, la valeur maximale. Une colonne/ligne de grille avec ce jeu de propriétés occupera toujours le moins d'espace possible, en fonction de son contenu, mais pas plus que la valeur maximale."

Voir cet article: Devenir un Ninja de la grille CSS!

Vous pouvez résoudre votre cas tout en utilisant des maximums basés sur des pourcentages:

div {
  outline: 1px dotted gray;
}

.container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr fit-content(20%);
}

.container div {
  overflow: hidden; /* this needs to be set so that width respects fit-content */
}
<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>
3
WDyar