CSS-Rasterlayout So verwenden Sie minmax ()

Das CSS-Layout-Modul bringt responsives Design auf die nächste Ebene, indem Sie a neue art von flexibilität das war noch nie zuvor gesehen worden. Jetzt können wir nicht nur Definieren Sie benutzerdefinierte Raster rasend schnell nur mit reinem CSS, aber das CSS-Grid hat es auch viele versteckte Juwelen Dadurch können wir das Raster weiter anpassen und komplizierte Layouts erstellen.

Das Minimal Maximal() Funktion ist eines dieser weniger bekannten Merkmale. Damit können Sie die Größe einer Gitterspur definieren als minimaler bis maximaler Bereich damit sich das Raster an den Viewport jedes Benutzers optimal anpassen kann.

Syntax

Die Syntax von Minimal Maximal() Funktion ist relativ einfach, es braucht zwei argumente: ein minimaler und ein maximaler Wert:

 minmax (min, max) 

Das Mindest Wert muss kleiner sein als das max, Andernfalls max wird vom Browser ignoriert.

Wir können das verwenden Minimal Maximal() Funktion als Wert des Raster-Vorlage-Spalten oder Raster-Vorlage-Zeilen Eigenschaft (oder beides). In unserem Beispiel verwenden wir den ersteren, da dies ein viel häufigerer Anwendungsfall ist.

 .Container Anzeige: Raster; Raster-Template-Spalten: Minmax (100px, 200px) 1fr 1fr; Raster-Vorlage-Zeilen: 100px 100px 100px; Gitterlücke: 10px;  

In der Codepen-Demo unten finden Sie die HTML- und CSS-Code Wir werden im gesamten Artikel verwenden.

Wir können benutzen andere Werte in der Minimal Maximal() Funktion hängt alles davon ab, welches benutzerdefinierte Raster wir erstellen möchten.

Statische Längenwerte

Es gibt zwei grundlegende Möglichkeiten, wie wir die verwenden können Minimal Maximal() Funktion mit statische Längenwerte.

Erstens können wir verwenden Minimal Maximal() nur für eine Rasterspalte und definieren Sie die Breite der anderen Spalten als einfache statische Werte (hier Pixel).

 Rasterschablonenspalten: minmax (100px, 200px) 200px 200px; 

In der GIF-Demo unten können Sie sehen, dass dieses Layout ist nicht ansprechbar, Die erste Spalte hat jedoch etwas Flexibilität. Die zweite und die dritte Spalte behalten ihre feste Breite (200px), während die erste Spalte zwischen 100px und 200px liegt, basierend auf dem verfügbaren Platz.

Zweitens können wir die Breite von definieren mehr als eine Rasterspalte mit Minimal Maximal(). Die Min- und Max-Werte sind beide statisch, das Raster ist also standardmäßig nicht ansprechbar. Die Spalten selbst sind jedoch flexibel, aber nur zwischen 100px und 200px. Sie gleichzeitig wachsen und schrumpfen wie wir die Größe des Darstellungsbereichs ändern.

 Rasterschablonen-Spalten: minmax (100px, 200px) minmax (100px, 200px) minmax (100px, 200px); 

Beachten Sie, dass wir auch können benutze die wiederholen() Funktion zusammen mit Minimal Maximal(). Das vorherige Code-Snippet kann also auch so geschrieben werden:

 Rasterschablonen-Spalten: Wiederholung (3, minmax (100px, 200px)); 

Dynamische Längenwerte

Abgesehen von statischen Werten ist der Minimal Maximal() Funktion akzeptiert auch Prozenteinheiten und das neue Fraktionseinheit (fr) als Argumente. Indem wir sie verwenden, können wir benutzerdefinierte Raster schaffen, die beides sind ansprechbar und ändern Sie ihre Abmessungen je nach verfügbarem Platz.

Der folgende Code führt zu einem Raster, in dem die Breite der ersten Spalte liegt liegt zwischen 50% und 80% während der zweite und der dritte Teilen Sie den verbleibenden Platz gleichmäßig.

 Raster-Template-Spalten: minmax (50%, 80%) 1fr 1fr; 

Wenn wir dynamische Werte mit verwenden Minimal Maximal() Funktion ist es wichtig, ein einzurichten Regel, die Sinn macht. Ich zeige Ihnen ein Beispiel wo Gitter fällt auseinander:

 Raster-Template-Spalten: minmax (1fr, 2fr) 1fr 1fr; 

Diese Regel macht keinen Sinn, da der Browser dies tut nicht in der Lage zu entscheiden Welchen Wert Sie dem zuweisen Minimal Maximal() Funktion. Der Mindestwert würde zu a führen 1fr 1fr 1fr Spaltenbreite, während das Maximum auf 2fr 1fr 1fr. Beides ist jedoch auch auf einem sehr kleinen Bildschirm möglich. Es gibt nichts, worauf sich der Browser beziehen kann.

Hier ist das Ergebnis:

Kombinieren Sie statische und dynamische Werte

Es ist auch möglich zu kombinieren Sie statische und dynamische Werte. In der obigen Codepen-Demo habe ich beispielsweise die minmax (100px, 200px) 1fr 1fr; Regel, die zu einem Raster führt, wo die erste Spalte liegt zwischen 100px und 200px und der verbleibende Platz ist gleichmäßig zwischen den beiden anderen geteilt.

 Raster-Template-Spalten: Minmax (100px, 200px) 1fr 1fr; 

Es ist interessant zu beobachten, dass mit wachsendem Viewport zuerst die erste Spalte von 100px auf 200px wächst. Die beiden anderen, von der fr-Einheit regiert, beginnen zu wachsen erst nachdem der erste seine maximale Breite erreicht hatte. Dies ist logisch, da das Ziel der Fraktionseinheit darin besteht, den verfügbaren (verbleibenden) Platz aufzuteilen.

Das min-Inhalt, Max-Inhalt, und Auto Schlüsselwörter

Da ist ein dritte Art von Wert wir können dem zuordnen Minimal Maximal() Funktion. Das min-Inhalt, Max-Inhalt, und Auto Schlüsselwörter beziehen sich auf die Dimensionen einer Gitterspur Inhalt enthält.

Max-Inhalt

Das Max-Inhalt Stichwort weist den Browser an, dass die Rasterspalte sein muss so breit wie das breiteste Element, das es enthält.

In der Demo unten habe ich eine 400px-breites Bild innerhalb der ersten Gitterspur und verwendete die folgende CSS-Regel (Eine Codepen-Demo mit dem vollständigen modifizierten Code finden Sie am Ende des Artikels.):

 .Container Rastervorlagen-Spalten: max-content 1fr 1fr; / ** * Dasselbe gilt für die minmax () - Notation: * grid-template-column: minmax (max-content, max-content) 1fr 1fr; * / 

Ich habe es nicht benutzt Minimal Maximal() Notation noch nicht, aber in dem obigen Code-Kommentar können Sie sehen, wie derselbe Code damit aussehen würde (obwohl er hier überflüssig ist).

Wie Sie sehen, ist die erste Rasterspalte so breit wie das breiteste Element (hier das Bild). Auf diese Weise können Benutzer das Bild immer sehen in voller Größe. Bei einer bestimmten Ansichtsfenstergröße ist dieses Layout jedoch nicht ansprechbar.

min-Inhalt

Das min-Inhalt Stichwort weist den Browser an, dass die Rasterspalte so breit sein muss wie die schmalstes Element, das es enthält, in einer Weise dass führt nicht zu einem Überlauf.

Mal sehen, wie die vorherige Demo mit dem Bild aussieht, wenn wir den Wert der ersten Spalte in ändern min-Inhalt:

 .Container Rastervorlagen-Spalten: Min-Inhalt 1fr 1fr; / ** * Dasselbe gilt für die minmax () - Notation: * grid-template-column: minmax (min-content, min-content) 1fr 1fr; * / 

Ich habe den grünen Hintergrund unter dem Bild gelassen, damit Sie die volle Größe der ersten Gitterzelle sehen können.

Wie Sie sehen, behält die erste Spalte die kleinste Breite bei kann ohne Überlauf erreicht werden. In diesem Beispiel wird dies durch die minimale Breite der vierten und siebten Gitterzelle definiert, die aus der Polsterung und Schriftgröße Eigenschaften als das Bild in der ersten Zelle könnte auf null reduziert werden ohne Überlauf.

Wenn die Rasterzelle eine Textzeichenfolge enthielt, min-Inhalt wäre gleich der Breite des längsten Wortes, Dies ist das kleinste Element, das ohne Überlauf nicht weiter verkleinert werden kann. Hier ist ein großartiger Artikel von BitsOfCode, in dem Sie sehen können, wie min-Inhalt und Max-Inhalt Verhalten Sie sich, wenn die Rasterzelle eine Textzeichenfolge enthält.

Verwenden min-Inhalt und Max-Inhalt zusammen

Wenn wir benutzen min-Inhalt und Max-Inhalt zusammen in der Minimal Maximal() Funktion erhalten wir eine Rasterspalte, die:

1. ist ansprechbar
2. hat keinen Überlauf
3. wird nicht breiter als das breiteste Element

 .Container Rastervorlagen-Spalten: minmax (min-Inhalt, max-Inhalt) 1fr 1fr;  

Wir können auch die verwenden min-Inhalt und Max-Inhalt Schlüsselwörter zusammen mit anderen Längenwerten in der Minimal Maximal() Funktion, bis die Regel Sinn macht. Zum Beispiel, minmax (25%, max-gehalt) oder minmax (min-inhalt, 300px) wären beide gültige Regeln.

Auto

Schließlich können wir auch die verwenden Auto Stichwort als Argument der Minimal Maximal() Funktion.

Wann Auto ist maximal verwendet, ihr Wert ist identisch mit Max-Inhalt.

Wenn es als Minimum verwendet, sein Wert wird durch angegeben min-Breite / min-Höhe Regel, was das bedeutet Auto ist manchmal identisch mit min-Inhalt, aber nicht immer.

In unserem vorherigen Beispiel, min-Inhalt macht gleich Auto, denn die minimale Breite der ersten Gittersäule ist immer kleiner als ihre minimale Höhe. Also die zugehörige CSS-Regel:

 .Container Rastervorlagen-Spalten: minmax (min-Inhalt, max-Inhalt) 1fr 1fr;  

könnte auch so geschrieben werden:

 .Container Rastervorlagen-Spalten: Minmax (Auto, Auto) 1fr 1fr;  

Das Auto Stichwort kann auch sein zusammen mit anderen statischen und dynamischen Einheiten verwendet (Pixel, Einheit, Prozentsätze usw.) im Minimal Maximal() Funktion zum Beispiel minmax (auto, 300px) wäre eine gültige Regel.

Sie können testen wie min-Inhalt, Max-Inhalt, und Auto Schlüsselwörter funktionieren mit Minimal Maximal() Funktion in der folgenden Codepen-Demo: