Verhindern eines Grid Blowouts

Angenommen, Sie haben ein sehr einfaches CSS-Grid-Layout mit einer Spalte, die auf 300px fixiert ist, und einer weiteren, die den Rest des Platzes mit 1fr einnimmt.

.grid {
  display: grid;
  grid-template-columns: 1fr 300px;
}

Das ist einigermaßen robust. Diese 1fr-Spalte nimmt den gesamten verbleibenden Platz ein, der von der fixierten 300px-Spalte übrig bleibt. Es stimmt, dass der Wert auto dasselbe tun würde, aber auto ist nicht ganz so robust, da seine Größe vom Inhalt abhängt. Wenn Sie also zu wenig Inhalt hätten, würde Ihre Spalte möglicherweise nicht den gesamten gewünschten Platz ausfüllen. Aber obwohl 1fr etwas robuster ist, schützt es Sie nicht vor zu großem Inhalt!

Hier verhält sich das Grid mit etwas Textinhalt einwandfrei

Beobachten Sie nun, wie die rechte Spalte von der Seite gedrängt wird, wenn wir ein riesiges Bild in diese Spalte einfügen

Das lässt sich leicht beheben – und vielleicht passiert es Ihnen nie, weil dieser Ausschnitt in unseren Stylesheets so üblich ist

img {
  max-width: 100%;
}

Aber einige Elemente sind nicht so freundlich. Nehmen wir das berüchtigte <pre>-Tag. Nehmen wir an, wir werfen eines davon in unsere 1fr-Spalte mit einer langen Textzeile. Wir sind wieder am Ende

Diesmal sind die Dinge nicht so einfach zu beheben! Selbst der Versuch, die Breite zu begrenzen und den Überlauf von <pre> zu verbergen, hilft nicht

pre {
  max-width: 100%;
  overflow: hidden;
}

Die eigentliche Lösung ist nicht allzu schwierig – wir müssen nur verstehen, was passiert. Ich kann nicht versprechen, dass ich das 100%ig genau erkläre, aber so wie ich es verstehe, **beträgt die minimale Breite einer Grid-Spalte auto**. (Das Gleiche gilt übrigens auch für Flex-Items.)

Und da auto vollständig vom Inhalt abhängt, können wir sagen, dass es "unbegrenzt" dimensioniert ist und seine Abmessungen flexibel sind. Wenn wir der Spalte eine explizite Breite geben würden, wie z. B. 50% oder 400px, dann würden wir sagen, dass sie "definitiv" dimensioniert ist.

Um unsere Lösung anzuwenden, müssen wir sicherstellen, dass die Spalte eine **definitive** Mindestbreite anstelle von auto hat.

Wir können es also entweder so beheben

.grid {
  /* auto minimum width, causing problem */
  grid-template-columns: 1fr 300px;

  /* fix: minimum width of 0 */
  grid-template-columns: minmax(0, 1fr) 300px;
}

Oder wir **geben dem Element, das diese Grid-Spalte belegt, eine tatsächliche min-width.** In unserer einfachen Demo platziert sich das <main>-Element automatisch in der ersten Spalte, da es das erste Kind des Grids ist.

Das ergibt dieses Ergebnis

main {
  min-width: 0;
}

Ich denke, es ist etwas robuster, dies auf der Ebene der Grid-Definition zu tun. Jedenfalls funktioniert es! Sehen Sie, wie das <pre>-Tag nun die Breite der Spalte respektiert und wie erwartet überlaufen kann?

Schön.