Hinweis: Ich habe gerade den Text unten übersetzt und hier gepostet. Referenzen finden Sie am Ende dieses Artikels.

Hallo. Heute möchte ich über einige spezielle CSS-Grid-Schlüsselwörter sprechen, die zum Definieren der Größe von Grid-Tracks nützlich sind. Die Möglichkeit, diese Schlüsselwörter zu verwenden, ermöglicht es Ihnen, die gewünschten Rasterspurgrößen genau zu bestimmen. So lass uns gehen.

Dieser Artikel ist Teil meiner Einführung in die CSS Grid-Reihe. Wenn Sie sich meine vorherigen Beiträge ansehen möchten, finden Sie hier das vollständige Inhaltsverzeichnis.

Einführung von Schlüsselwörtern zur Größenbestimmung

Wenn es um CSS Grid geht, gibt es nur drei Schlüsselwörter, mit denen Sie die Größe von Spuren bestimmen können. Diese Schlüsselwörter sind Auto, Min-Content und Max-Content. Sie alle können in den CSS-Eigenschaften „grid-template-colums“ und „grid-template-rows“ verwendet werden.

Min-Inhalt und Max-Inhalt

Wenn Sie die Größe der Rasterspur von ihrem Inhalt abhängig machen möchten, müssen Sie eines von zwei Schlüsselwörtern verwenden: min-content oder max-content. Rasterspur mit minimalem Inhalt versucht, die Mindestgröße beizubehalten, ohne den Inhalt zu überlaufen. Max-Content-Grid-Track geht jedoch davon aus, dass der freie Speicherplatz zum Erweitern unendlich ist, und geht von der idealen Breite für Ihren Inhalt aus.

Lassen Sie mich Ihnen einige Beispiele zeigen, die den Unterschied zwischen den genannten Schlüsselwörtern zeigen. Beachten Sie, dass jedes Bild zwei Container enthält: den Container mit einer Rasterspalte mit minimalem Inhalt auf der linken Seite und den Container mit einer Rasterspalte mit Raster mit maximalem Inhalt auf der rechten Seite.

Wie Sie hier sehen können, gibt es keinen Größenunterschied zwischen den Spalten „Min.-Inhalt“ und „Max.-Inhalt“. Der Grund dafür ist, dass das Bild seine „standardmäßige feste Größe“ hat, die sich nicht ändert, es sei denn, Sie weisen es ausdrücklich an, sich zu ändern. Der Inhalt eines Textes hingegen hat die Fähigkeit, seine Größe je nach Situation zu „komprimieren“. Diese Komprimierung erfolgt mittels Textumbruch (Textumbruch), d. h. einzelne Wörter werden nicht umbrochen. In diesem Wissen ersetzen wir das Bild im obigen Beispiel durch etwas Text.

Diesmal sind die Spaltenbreiten unterschiedlich. Die Spalte min-content erzwingt einen „Umbruch“ des Textinhalts, während die Spalte max-content so weit expandiert, dass kein Textumbruch erforderlich ist. Beachten Sie, dass die Spalte min-content die gleiche Breite wie das längste Wort hat und die Spalte max-content jetzt breiter als der Container selbst ist.

Was passiert, wenn eine Spalte mehr als einen Inhaltstyp enthält? Unten sehen Sie ein Beispiel für Spalten mit Bildern und Text.

In beiden Fällen bestimmt das breiteste Element die Größe der Spalte. Im Fall von min-content ist dieses Element das Bild oder das längste Wort. Im Fall der Spalte max-width ist dies ein Bild oder der gesamte Text. Beachten Sie, dass beide Inhaltstypen innerhalb der Spalte vertikal getrennt sind. Ich möchte dieses Verhalten in einem meiner zukünftigen Artikel diskutieren.

Stichwort Auto

Das Schlüsselwort auto bezieht sich auf die Einheit fr, die ich in den beiden vorherigen Artikeln beschrieben habe. Es legt in ähnlicher Weise fest, dass die Rasterspur den gesamten verfügbaren Platz auf einer bestimmten Achse „ausfüllen“ muss.

.container {
    /** ... **/
    grid-template-columns: auto auto;
}

Es gibt jedoch zwei Hauptunterschiede zwischen dem Schlüsselwort auto und der Einheit fr. Erstens ist das Schlüsselwort auto keine Einheit, daher können Sie es nicht mit einem numerischen Wert (z. B. 2auto) verwenden, wie Sie es mit fr tun können. Zweitens „verliert“ das Schlüsselwort auto immer mit der Einheit fr, wenn beide zusammen verwendet werden. Siehe das Beispiel unten.

.container {
    /** ... **/
    grid-template-columns: auto 1fr;
}

Sie können davon ausgehen, dass die Spalte „Auto“ in der horizontalen Dimension genauso viel Platz „füllt“ wie die Spalte „Fr“. Das Vorhandensein der Spalte fr führt jedoch dazu, dass die Größe der Spalte automatisch auf die Größe des vorhandenen Inhalts „verkleinert“ wird.

Beachten Sie, dass sich bei Textinhalten die automatische Rasterverfolgung anders verhält als die Min-Content-/Max-Content-Rasterverfolgung. Wenn Auto mit Fr gemischt wird, erzwingt Auto-Track niemals einen „Umbruch“ des Textinhalts, es sei denn, Auto-Track „füllt“ den gesamten verfügbaren Platz.

.container {
    /** ... **/
    width: 200px;
    grid-template-columns: auto 1fr;
}

Vielen Dank, dass Sie diesen kurzen Artikel gelesen haben. Wenn Sie weitere Inhalte dieser Art lesen möchten, folgen Sie meinem dev.to- oder Twitter-Konto. Sie können mir auch gerne Feedback jeglicher Art geben. Ich würde gerne Ihre Kommentare lesen. Bis bald in meinem nächsten Artikel!

PS. Wenn Sie meine Arbeit unterstützen möchten, wäre ich für eine Tasse Kaffee dankbar. Danke. ❤️

Quelle

Artikel geschrieben von Mateusz Kirmuć.