In der Seitenleiste wird angezeigt:

In dieser Demo wird die Funktion minmax() für Rasterlayouts genutzt. In der Demo wird mit dieser Funktion die Mindestgröße der Seitenleiste auf 100px festgelegt. Auf größeren Bildschirmen wird die Größe auf 25% erweitert. Die Seitenleiste belegt immer 25% der horizontalen Fläche des übergeordneten Elements, bis 25% kleiner als 100px wird.

Fügen Sie dies mithilfe des Attributs grid-template-columns mit folgendem Wert hinzu: minmax(100px, 25%) 1fr. Das Element in der ersten Spalte (in diesem Fall die Seitenleiste) erhält um 25% den Wert 100px. Das zweite Element (hier der Abschnitt main) nimmt den Rest des Bereichs als einzelne 1fr-Spur ein.minmax

.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;
}