Die Vermeidung einer Grid-Blowout

0
60

Angenommen, Sie haben eine sehr einfache CSS-grid-layout mit einer Spalte fest auf 300px und eine andere nehmen den rest des Raumes zu 1fr.

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

Das ist etwas robuster. Dass 1fr Spalte dauern wird, bis alle verbleibenden Platz hinter der linken die Feste 300px Spalte. Es ist wahr, dass das auto Wert würde das gleiche tun, aber auto ist nicht ganz so robust, da es die Größe ist, auf der Grundlage der Inhalte im inneren. So, wenn Sie hatte zu wenig Inhalt ist, dann ist Ihre Spalte möglicherweise nicht den gesamten Raum ausfüllen, Sie wollen es zu. Aber während 1fr ist etwas robuster, es wird nicht ganz schützen Sie vom Inhalt, der ist zu groß!

Hier ist das grid verhält sich just fine mit einigen text-Inhalt:

Nun, sehen Sie, dass die Rechte Spalte geblasen bekommen, von der Seite, wenn wir fallen ein gigantisches Bild in dieser Spalte:

Dieser hier ist einfach zu beheben — und Sie können nicht einmal habe es Ihnen passieren, denn das snippet ist so Häufig in unseren stylesheets:

img {
max-width: 100%;
}

Aber einige Elemente sind nicht so freundlich. Nehmen Sie die berüchtigten <pre> – tag. Sagen wir, wir werfen einen in unserer 1fr Spalte durch eine lange Zeichenfolge von text. Wir sind wieder zu wrecked:

Diese Zeit, die Dinge sind nicht so leicht zu beheben! Auch nur den Versuch zu beschränken, die Breite und ausblenden der überlauf des <pre> ist nicht zu helfen:

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

Die wirkliche Lösung gar nicht so schwer — wir müssen nur verstehen, was passiert ist. Ich kann nicht Versprechen ich bin der Erläuterung dieser 100% genau, aber so wie ich es verstehe, ist die minimale Breite eines raster-Spalte ist “auto”. (Das gleiche gilt für flex-Elemente, übrigens.)

Und da auto ist vollständig auf die Inhalte, wir können sagen, es ist “auf unbestimmte Zeit” Größe, seine Abmessungen flex. Wenn man eine explizite Breite für die Spalte, wie 50% oder 400px, dann würden wir sagen, es ist “definitiv” Größe.

Anwenden beheben, müssen wir sicherstellen, dass es die Spalte hat eine bestimmte minimale Breite statt auto.

Also, entweder wir lösen es wie folgt:

.grid {
/* auto-minimale Breite, verursacht problem */
grid-template-columns: 1fr 300px;

/* fix: minimale Breite von 0 */
grid-template-columns: minmax(0, 1fr) 300px;
}

Oder wir setzen einen tatsächlichen min-width auf das element, das belegt, dass die grid-Spalte. In unserer einfachen demo, das <main> – Elements automatisch stellt Sie sich in dieser ersten Spalte, da es das erste Kind des Rasters.

Dass uns dies:

die main {
min-width: 0;
}

Ich denke, es ist ein wenig mehr robust, dies zu tun bei der grid-definition-Niveau. Sowieso, es funktioniert der trick! Sehen Sie, wie das <pre> – Tags respektiert jetzt die Breite der Spalte an und kann überlaufen wie erwartet?

Schön.