La barre latérale dit

Cette démonstration tire parti de la fonction minmax() pour les mises en page en grille. Dans la démonstration, cette fonction permet de définir la taille minimale de la barre latérale sur 100px, mais sur les grands écrans, elle s'étire jusqu'à 25%. La barre latérale occupe toujours 25% de l'espace horizontal du parent, jusqu'à ce que 25% devienne inférieure à 100px.

Pour ce faire, utilisez la propriété grid-template-columns avec la valeur suivante : minmax(100px, 25%) 1fr. L'élément de la première colonne (la barre latérale, dans ce cas) obtient une minmax de 100px à 25%, et le deuxième élément (la section main ici) occupe le reste de l'espace en tant que piste 1fr unique.

.parent {
  display: grid;
  grid-template-columns: minmax(100px, 25%) 1fr;
}

HTML

<div class="parent">
    <div class="section yellow" contenteditable>
    Min: 100px / Max: 25%
    </div>
    <div class="section blue" contenteditable>
      This element takes the second grid position (1fr), meaning
      it takes up the rest of the remaining space.
    </div>
  </div>

CSS

        .parent {
  display: grid;
  grid-template-columns: minmax(100px, 25%) 1fr;
}