Leitfaden zum CSS-Rasterlayout für Einheiten
Das CSS-Layout-Modul wurde mit einem versendet neue CSS-Einheit nannte das fr Einheit. So einfach wie möglich, fr ist der Abkürzung des Wortes “Fraktion”. Die neue Einheit ermöglicht es, das Raster schnell in proportionale Spalten oder Reihen aufzuteilen. Als Ergebnis die Schaffung von vollständig ansprechende und flexible netze wird fast zur Brise.
Da die Fraktionseinheit zusammen mit dem Grid Layout-Modul eingeführt wurde, können Sie dies in jedem Browser verwenden unterstützt das CSS-Raster. Wenn Sie auch ältere Browser unterstützen möchten, ist dies ein großartiger CSS-Gitter Polyfill Damit können Sie nicht nur die fr Einheit, aber auch andere Rasterfunktionen.
Grundlegende Verwendung
Schauen wir uns zuerst a an Grundraster das verwendet die Brucheinheit. Das Layout unten teilt den Raum in auf drei gleich breite spalten und zwei gleichhohe Reihen.
Das zugehörige HTML besteht aus sechs divs markiert mit .Box Klasse, in einem .Verpackung div.
1.2.3.4.5.6.
Um das Grid Layout-Modul zu verwenden, müssen Sie das hinzufügen Anzeige: Raster; CSS-Eigenschaft für den Wrapper. Das Raster-Vorlage-Spalten Eigenschaft verwendet die fr Einheit als Wert; das Das Verhältnis der drei Spalten beträgt 1: 1: 1.
Für die Rasterzeilen (Raster-Vorlage-Zeilen Eigenschaft), habe ich nicht genutzt fr Einheit, da es nur sinnvoll ist, wenn der Wrapper hat eine feste Höhe. Ansonsten kann es bei manchen Geräten allerdings auch dann seltsame Ergebnisse geben fr Einheit behält das Verhältnis bei (und das ist riesig).
Das Netzlücke Eigentum fügt ein 10px-Raster hinzu zwischen den Boxen. Wenn Sie keine Lücke wünschen, entfernen Sie diese Eigenschaft einfach.
.Wrapper Anzeige: Gitter; Rastervorlagen-Spalten: 1fr 1fr 1fr; Raster-Vorlage-Zeilen: 200px 200px; Gitterlücke: 10px; .box color: white; Text ausrichten: Mitte; Schriftgröße: 30px; Polsterung: 25px;
Beachten Sie, dass das CSS oben einige grundlegende Stilelemente wie Hintergrundfarben nicht enthält. Sie können Den vollständigen Code finden Sie in der Demo am Ende des Artikels.
Verhältnis ändern
Natürlich kann man nicht nur 1: 1: 1 verwenden beliebiges Verhältnis. Unten habe ich gebraucht 1: 2: 1-Fraktionen das teilt auch den Raum in drei Spalten aber die mittlere Spalte wird sein doppelt so breit wie die anderen beiden.
Ich habe auch den Wert von erhöht Netzlücke So können Sie sehen, wie sich das Layout ändert. Grundsätzlich der Browser zieht die Gitterlücke von der Breite des Ansichtsfensters ab (In diesem Beispiel addieren sich die Rasterlücken auf 80px) und schneidet den Rest auf nach den angegebenen Brüchen.
.Wrapper Anzeige: Gitter; Gitter-Template-Spalten: 1fr 2fr 1fr; Raster-Vorlage-Zeilen: 200px 200px; Gitterlücke: 40px;
Kombinieren fr mit anderen CSS-Einheiten
Sie können kombinieren das fr Einheit mit alle anderen CSS-Einheiten auch. Im folgenden Beispiel habe ich beispielsweise die 60% 1fr 2fr Verhältnis für mein Raster.
Wie funktioniert das? Das Der Browser weist die 60% der Breite des Ansichtsfensters zu zur ersten Spalte. Dann teilt es den Rest des Raums in 1: 2-Fraktionen.
Das Gleiche könnte auch als geschrieben werden 60% 13.33333% 26.66667%. Aber ehrlich gesagt, warum sollte jemand dieses Format verwenden wollen? Ein großer Vorteil der Fraktionseinheit ist, dass es verbessert die Lesbarkeit von Code. Darüber hinaus ist es völlig genau, da das prozentuale Format nur noch 99,9999% beträgt.
.Wrapper Anzeige: Gitter; Rastervorlagen-Spalten: 60% 1fr 2fr; Raster-Vorlage-Zeilen: 200px 200px; Gitterlücke: 10px;
Abgesehen von Prozentsätzen, Sie können auch andere CSS-Einheiten verwenden zum Beispiel zusammen mit der Fraktionseinheit pt, px, em, und rem.
Fügen Sie Leerzeichen mit hinzu fr
Was ist, wenn Sie nicht wollen, dass Ihr Design überladen wird fügen Sie etwas Leerzeichen hinzu zu deinem Gitter Die Fraktionseinheit hat auch eine einfache Lösung dafür.
Wie Sie sehen, dieses Gitter hat eine leere Spalte während es noch alle sechs Kästen behält. Für dieses Layout müssen wir den Platz nach oben schneiden in vier Spalten statt drei. Also benutzen wir die 1fr 1fr 1fr 1fr Wert für die Raster-Vorlage-Spalten Eigentum.
Wir fügen die leere Spalte in das ein Raster-Vorlagenbereiche Eigenschaft, mit der Punktnotation. Im Grunde erlaubt diese Eigenschaft das Referenz benannte Gitterbereiche. Und mit dem können Sie Rasterbereiche benennen Netzfläche Eigenschaft, die Sie verwenden müssen separat für jeden Bereich.
.Wrapper Anzeige: Gitter; Rastervorlagen-Spalten: 1fr 1fr 1fr 1fr; Raster-Vorlage-Zeilen: 200px 200px; Gitterlücke: 10px; Raster-Vorlagenbereiche: "Box-1 Box-2. Box-3" "Box-4 Box-5. Box-6"; .box-1 Gitterfläche: Box-1; .box-2 grid-area: box-2; .box-3 grid-area: box-3; .box-4 grid-area: box-4; .box-5 grid-area: box-5; .box-6 grid-area: box-6;
Die Whitespace-Bereiche muss nicht unbedingt eine Kolumne bilden, Sie kann überall sein in der Startaufstellung.
Das wiederholen() Funktion
Sie können auch die fr Einheit zusammen mit dem wiederholen() Funktion Für ein einfachere Syntax. , Dies ist nicht erforderlich, wenn Sie nur ein einfaches Raster haben, aber wenn Sie möchten, kann es nützlich sein ein kompliziertes Layout implementieren, zum Beispiel a verschachteltes Gitter.
.Wrapper Anzeige: Gitter; Rastervorlagen-Spalten: Wiederholung (3, 1fr); / * grid-template-Spalten: 1fr 1fr 1fr; * / grid-template-row: 200px; Gitterlücke: 10px;
Das wiederholen (3, 1fr) Syntax ergibt das gleiche Layout wie 1fr 1fr 1fr. Das Layout ist das gleiche wie im ersten Beispiel.
Wenn du Erhöhen Sie den Multiplikator in der wiederholen() Funktion haben Sie mehr Spalten. Zum Beispiel, wiederholen (6, 1fr) führt in sechs gleiche Spalten. In diesem Fall alle unsere Boxen wird in der gleichen Zeile sein, Das heißt, es reicht aus, nur einen Wert (200px) für den Wert zu verwenden Raster-Vorlage-Zeilen Eigentum.
.Wrapper Anzeige: Gitter; Rastervorlagen-Spalten: Wiederholung (6, 1fr); Raster-Vorlage-Zeilen: 200px; Gitterlücke: 10px;
Sie können verwenden wiederholen() mehr als einmal. Das folgende Beispiel führt beispielsweise zu einem Raster, in dem sich die letzten drei Spalten befinden doppelt so breit wie die ersten drei.
.Wrapper Anzeige: Gitter; Rastervorlagen-Spalten: Wiederholung (3, 1fr) Wiederholung (3, 2fr); Raster-Vorlage-Zeilen: 200px; Gitterlücke: 10px;
Du kannst auch kombinieren wiederholen() mit anderen CSS-Einheiten. Zum Beispiel könnten Sie verwenden 200px wiederholen (4, 1fr) 200px als gültiger Code.
Wenn Sie daran interessiert sind Erstellen Sie komplexe Layouts mit dem CSS-Grid-Modul die wiederholen() Funktion und die fr Einheit Rachel Andrew hat einen interessanten Blogbeitrag, wie man das machen kann.
Eine Demo zum Experimentieren
Endlich, Hier ist die Demo, die ich versprochen habe. Es verwendet den gleichen Code wie das erste Beispiel in diesem Artikel. Gabel es, und sehen Sie, was Sie mit dem erreichen können fr Einheit.
