Wenn Sie dachten, CSS Grid löse Probleme, bei denen überlaufender Inhalt aus den Grenzen eines horizontalen Layouts ausbricht, dann denken Sie noch einmal darüber nach. Dave Rupert beschreibt zwei Möglichkeiten, wie er unbeabsichtigt aus dem Grid ausbrach und wie er die Dinge wieder in Ordnung brachte.
Als Front-End-Entwickler stört mich nichts mehr, als eine unerwartete horizontale Scrollleiste auf einer Website zu sehen. Beim Erstellen eines Checkout-Layouts mit CSS Grid war ich überrascht, etwas Geheimnisvolles zu finden, das den Container kaputtmachte. Ich dachte, Grid löse die Größenbestimmung irgendwie automatisch.
Schließlich fand ich zwei Möglichkeiten, CSS Grid zu durchbrechen. Wie es der Zufall wollte, tat ich beides im selben Layout.
Es stellt sich heraus, dass diese Sonderfälle auf Folgendes zurückzuführen sind:
- Verwendung von
overflow-xauf einem Grid-Element - Verwendung von Grid für Formularsteuerelemente (oder genauer gesagt, für ersetzte Elemente)
Daves Lösung ist eine Reihe von CSS-Regeln, die liebevoll Fit Grid genannt werden. Dies ist eine Hilfsklasse, die die automatisch zugewiesene Eigenschaft min-width: auto für Grid-Elemente effektiv entfernt und ersetzt. Dies ist eine äußerst hilfreiche Ressource, obwohl er zugibt, dass sie an die Grenze von „Clearfix 2.0“ stößt.