CSS Grid: Dimensionierungsschlüsselwörter

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. Also, los geht's.

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 den vollständigen Index.

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. 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. Min-Content Grid Track versucht, die Mindestgröße beizubehalten, ohne den Inhalt zu überfüllen. Max-Content-Rasterspur geht jedoch davon aus, dass der freie Platz zum Erweitern unendlich ist und die ideale Breite für Ihre Inhalte angenommen wird.

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 für minimalen Inhalt auf der linken Seite und den Container mit einer Rasterspalte für maximalen 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 stark erweitert wird, 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 finden 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. Bei der Spalte max-width handelt es sich um ein Bild oder den gesamten 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 Raum 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 wie bei fr mit einem numerischen Wert (z. B. 2auto) verwenden. 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.

Observe que, no caso de text content, a auto grid track se comporta de forma diferente da min-content/max-content grid track. Quando auto é misturado com fr, a auto-track nunca força o text content a "wrap", a menos que a auto-track "fill" (preencha) todo o espaço disponível.

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

Obrigado por ler este pequeno artigo. Se quiser ler mais conteúdo como este, siga minha conta dev.to ou twitter. Além disso, sinta-se à vontade para me dar qualquer tipo de feedback. Eu adoraria ler seus comentários. Vejo você em breve no meu próximo artigo!

PS. Se quiser apoiar meu trabalho, ficarei grato por uma xícara de café. Obrigado. ❤️

Fonte

Artigo escrito por Mateusz Kirmuć.

Das obige ist der detaillierte Inhalt vonCSS Grid: Dimensionierungsschlüsselwörter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!