Leitfaden zum CSS Raster Layout Fr Einheit
Das CSS-Grid-Layout-Modul wurde mit einer neuen CSS-Einheit namens fr
Einheit ausgeliefert . So einfach es auch sein fr
, fr
ist die Abkürzung für das Wort "Bruch" . Die neue Einheit ermöglicht es, das Raster schnell in proportionale Spalten oder Reihen aufzuteilen. Dadurch wird die Erstellung von reaktionsschnellen und flexiblen Grids fast zum Kinderspiel.
Da die Fraktionseinheit zusammen mit dem Grid-Layout-Modul eingeführt wurde, können Sie sie in jedem Browser verwenden, der das CSS-Grid unterstützt . Wenn Sie auch ältere Browser unterstützen möchten, ist dies ein großartiges CSS-Grid-Polyfill, mit dem Sie nicht nur die fr
Einheit, sondern auch andere Grid-Funktionen verwenden können.
Sehen wir uns zuerst ein Grundraster an, das die Fraktionseinheit verwendet. Das Layout darunter teilt den Raum in drei Spalten gleicher Breite und zwei Zeilen gleicher Höhe .
Der zugehörige HTML-.box
besteht aus sechs divs, die mit der .box
Klasse innerhalb eines .wrapper
.box
markiert sind.1.2.3.4.5.6.
Um das Rasterlayout-Modul zu verwenden, müssen Sie die display: grid;
hinzufügen display: grid;
CSS-Eigenschaft für den Wrapper. Die Eigenschaft grid-template-columns
verwendet die Einheit fr
als Wert. das Verhältnis der drei Spalten ist 1: 1: 1 .
Für die Gitterzeilen (Eigenschaft grid-template-rows
) habe ich die Einheit fr
nicht verwendet, da sie nur dann sinnvoll ist, wenn der Wrapper eine feste Höhe hat . Ansonsten kann es auf einigen Geräten seltsame Ergebnisse geben, aber auch dann behält die fr
Einheit das Verhältnis bei (und das ist riesig).
Die grid-gap
Eigenschaft fügt ein 10px-Raster zwischen den Boxen hinzu. Wenn Sie keine Lücke möchten, entfernen Sie diese Eigenschaft.
.wrapper {Anzeige: Gitter; Raster-Vorlage-Spalten: 1fr 1fr 1fr; Raster-Vorlage-Zeilen: 200px 200px; Grid-Lücke: 10px; } .box {Farbe: weiß; Textausrichtung: Mitte; Schriftgröße: 30px; Auffüllen: 25px; }
Beachten Sie, dass das obige CSS einige grundlegende Stile wie Hintergrundfarben nicht enthält. Sie finden den vollständigen Code in der Demo am Ende des Artikels .
Änderungsrate
Natürlich können Sie nicht nur 1: 1: 1, sondern ein beliebiges Verhältnis verwenden . Unten habe ich 1: 2: 1 Brüche benutzt, die den Raum auch in drei Spalten teilen , aber die mittlere Spalte wird doppelt so breit sein wie die anderen beiden.
Ich habe auch den Wert dergrid-gap
erhöht, damit Sie sehen können, wie sich das Layout ändert. Grundsätzlich zieht der Browser die Gitterlücke von der Breite des Darstellungsbereichs ab (in diesem Beispiel addieren sich die Gitterlücken zu 80 Pixel) und schneidet den Rest entsprechend den gegebenen Brüchen auf..wrapper {Anzeige: Gitter; Raster-Vorlage-Spalten: 1fr 2fr 1fr; Raster-Vorlage-Zeilen: 200px 200px; Rasterabstand: 40px; }
Kombiniere fr
mit anderen CSS-Einheiten
Sie können die fr
Einheit auch mit anderen CSS-Einheiten kombinieren . Im Beispiel unten verwendete ich zum Beispiel das 60% 1fr 2fr
Verhältnis für mein Raster.
Das gleiche könnte auch als 60% 13.33333% 26.66667%
. Aber warum sollte jemand dieses Format verwenden wollen? Ein großer Vorteil der Fraktionseinheit besteht darin, dass sie die Lesbarkeit des Codes verbessert . Darüber hinaus ist es absolut genau, da das prozentuale Format immer noch nur 99, 9999% beträgt.
.wrapper {Anzeige: Gitter; Raster-Vorlage-Spalten: 60% 1fr 2fr; Raster-Vorlage-Zeilen: 200px 200px; Grid-Lücke: 10px; }
Neben Prozenten können Sie auch andere CSS-Einheiten zusammen mit der Fraktionseinheit verwenden, z. B. pt
, px
, em
und rem
.
Schreibe Whitespace mit fr
Was ist, wenn Sie nicht möchten, dass Ihr Design unübersichtlich wird und Ihrem Gitter ein paar Leerzeichen hinzufügt ? Die Fraktionseinheit hat auch eine einfache Lösung dafür.
Wie Sie sehen können, hat dieses Gitter eine leere Spalte, während es immer noch alle sechs Boxen enthält. Für dieses Layout müssen wir den Platz in vier statt drei Spalten aufteilen. Wir verwenden also den Wert1fr 1fr 1fr 1fr
für die Eigenschaft grid-template-columns
.Wir fügen die leere Spalte innerhalb der Eigenschaft grid-template-areas
mithilfe der Punktnotation hinzu . Im Wesentlichen ermöglicht diese Eigenschaft, auf benannte Rasterbereiche zu verweisen . Außerdem können Sie Rasterbereiche mit der grid-area
benennen, die Sie für jeden Bereich separat verwenden müssen .
.wrapper {Anzeige: Gitter; Raster-Vorlage-Spalten: 1fr 1fr 1fr 1fr; Raster-Vorlage-Zeilen: 200px 200px; Grid-Lücke: 10px; Raster-Vorlagen-Bereiche: "Box-1 Box-2. Box-3" "Box-4 Box-5. Box-6"; } .box-1 {Gitterbereich: Box-1; } .box-2 {Gitterbereich: Box-2; } .box-3 {Gitterbereich: Box-3; } .box-4 {Gitterbereich: Box-4; } .box-5 {Gitterbereich: Box-5; } .box-6 {Gitterbereich: Box-6; }
Die Leerraumbereiche müssen nicht notwendigerweise eine Spalte bilden, sie können irgendwo im Raster sein.
Die Funktion repeat()
Sie können die Einheit fr
zusammen mit der Funktion repeat()
für eine einfachere Syntax verwenden . Dies ist nicht notwendig, wenn Sie nur ein einfaches Gitter haben, aber es kann nützlich sein, wenn Sie ein kompliziertes Layout implementieren möchten, zum Beispiel ein verschachteltes Gitter .
.wrapper {Anzeige: Gitter; Raster-Vorlage-Spalten: wiederholen (3, 1fr); / * Raster-Vorlage-Spalten: 1fr 1fr 1fr; * / grid-template-rows: 200px; Grid-Lücke: 10px; }
Die repeat(3, 1fr)
ergibt das gleiche Layout wie 1fr 1fr 1fr
. Das Layout unten ist das gleiche wie im ersten Beispiel.
repeat()
erhöhen, haben Sie mehr Spalten. Zum Beispiel ergibt die repeat(6, 1fr)
sechs gleiche Spalten . In diesem Fall befinden sich alle unsere Felder in derselben Zeile, was bedeutet, dass es ausreicht, nur einen Wert (200px) für die Eigenschaft grid-template-rows
..wrapper {Anzeige: Gitter; Gitter-Template-Spalten: Wiederholung (6, 1fr); Raster-Vorlage-Zeilen: 200px; Grid-Lücke: 10px; }Sie können
repeat()
mehrmals verwenden . Das folgende Beispiel führt beispielsweise zu einem Raster, in dem die letzten drei Spalten doppelt so breit wie die ersten drei Spalten sind..wrapper {Anzeige: Gitter; Raster-Vorlage-Spalten: Wiederholung (3, 1fr) Wiederholung (3, 2fr); Raster-Vorlage-Zeilen: 200px; Grid-Lücke: 10px; }Sie können
repeat()
mit anderen CSS-Einheiten kombinieren . Zum Beispiel könnten Sie 200px repeat(4, 1fr) 200px
als gültigen Code verwenden.Wenn Sie daran interessiert sind , komplexe Layouts mit dem CSS-Grid-Modul zu erstellen, finden Sie in der repeat()
Funktion und in der Unit Rachel Andrew einen interessanten Blog-Beitrag, wie Sie das machen können.
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. Fork es, und sehen Sie, was Sie mit der fr
Einheit erreichen können.
Wie man WordPress-Beiträge mit Wave co-editiert
Die Verwaltung eines Blogs mit mehreren Autoren kann ziemlich mühsam sein. Aber was ist, wenn ich Ihnen von einem Tool erzähle, mit dem Sie gemeinsam mit anderen Autoren in WordPress Blog-Posts bearbeiten können und Feedback zu Ihrem Bericht erhalten, als würden Sie neben ihnen sitzen? Vor allem können Sie dieses Werkzeug völlig kostenlos bekommen!Inter
Top 3rd Party Kommentarsysteme - Bewertet
Die Entwicklung von Online-Feedback und -Bewertungen hat einen langen Weg zurückgelegt. Vom Gästebuch der alten Schule über Foren- und Feedback-Formulare und von nativen plattformabhängigen Kommentarsystemen bis zu heutigen Kommentarsystemen von Drittanbietern, die plattformübergreifend arbeiten, unabhängig davon, auf welcher Programmiersprache oder welchen Skripts Ihre Site basiert.Diese