Der vollständige Leitfaden zum Rasterlayout in CSS

Grid ist ein zweidimensionales Rasterlayoutsystem. Damit können wir problemlos komplexe Layouts implementieren, ohne float , inline-block und position die im Wesentlichen Hack-Methoden sind.

Mit dem CSS-Rasterlayout können Sie eine Seite gut in mehrere Hauptbereiche unterteilen und die Größe, Position, Hierarchie und andere Beziehungen dieser Bereiche definieren (vorausgesetzt, dass HTML diese Bereiche generiert).

Wie bei einer Tabelle können wir mit dem Rasterlayout Elemente in Zeilen oder Spalten ausrichten. Für das Layout sind Raster jedoch wahrscheinlicher oder einfacher zu verwenden als Tabellen.

Rasterlayout-Konzepte

Bevor Sie lernen, müssen Sie die folgenden Rasterkonzepte verstehen.

Rasterspuren

Eine Rasterspur ist der Raum zwischen zwei Rasterlinien. Sie werden im Raster mithilfe der Eigenschaften grid-template-columns und grid-template-rows definiert.

Im obigen Bild gibt es zwei Zeilen und drei Spalten. Eine Zeile oder eine Spalte wird als Spur bezeichnet.

Gitternetzlinien

Durch die Verwendung Grid zum Definieren von Spuren in einem expliziten Raster werden auch Rasterlinien erstellt.

Gitternetzlinien können über ihre Nummern angesprochen werden. In Sprachen, die von links nach rechts geschrieben werden, befindet sich列線1 auf der linken Seite des Rasters und行線1 oben. Die Zeilennummerierung folgt dem Schreibmodus des Dokuments. In einer Sprache, die von rechts nach links geschrieben wird, befindet sich列線1 also auf der rechten Seite des Rasters. Das Bild unten zeigt die Zeilennummerierung dieses Rasters, vorausgesetzt, die Sprache verläuft von links nach rechts.

Gitterzelle

Im Grid -Layout ist eine Rasterzelle die kleinste Einheit im CSS-Raster. Es handelt sich dabei um den Raum zwischen vier Rasterlinien, ähnlich einer Tabellenzelle.

Rasterbereiche

Eine Rasterfläche ist ein rechteckiger Bereich in einem Raster, der aus einer oder mehreren Rasterzellen besteht. Grundsätzlich muss die Rasterfläche rechteckig sein. So ist es beispielsweise nicht möglich, T-förmige oder L-förmige Rasterflächen zu erstellen.

Dachrinnen

Der Rasterabstand ist der Abstand zwischen den Rasterspuren und kann im Rasterlayout mit den Methoden grid-column-gap und grid-row-gap erstellt werden.

Verwenden des Rasterlayouts

Ähnlich wie bei Flex benötigen Sie zum Verwenden des Rasterlayouts zunächst einen Container. Sie können einen Rastercontainer erhalten, indem Sie display eines Elements auf grid einstellen. Die untergeordneten Elemente eines Containers sind Rasterelemente, die td in table ähneln, aber flexibler sind.

float , clear und vertical-align haben keine Auswirkung auf einen Rastercontainer.

Eigenschaften von Containern

Rastervorlage

Nachdem wir den Rastercontainer erstellt haben, können wir definieren, wie viele Zeilen und Spalten das Raster hat und wie groß jede Zeile und Spalte sein soll.

Raster-Vorlage-Zeilen

Wir verwenden grid-template-rows , um explizit zu definieren, wie viele Zeilen das Raster hat. Es können folgende Werte angenommen werden:

Das Schlüsselwort none weist auf ein mehrdeutiges Raster hin. Alle Zeilen und ihre Größen werden implizit grid-auto-rows angegeben.

非負值的長度大小: wie px, em, vw usw.

百分比: relativ zum Grid-Container. Wenn es sich um inline-grid handelt, wird der Prozentwert als auto behandelt.

flex : Ein nicht negativer Wert, der die Einheit fr verwendet, um den Elastizitätskoeffizienten der Gitterspurgröße zu definieren. Jede Rasterspur mit definiertem flex wird proportional zum verbleibenden verfügbaren Platz zugewiesen

Das Schlüsselwort max-content gibt an, dass der maximale Inhalt des Rasterelements die Rasterspur einnimmt.

Das Schlüsselwort min-content gibt an, dass die Rasterspur durch den größten und kleinsten Inhalt des Rasterelements belegt ist.

auto Wenn die Rasterspur ihre maximale Größe hat, entspricht dies max-content ; wenn sie ihre minimale Größe hat, entspricht dies min-content

Raster-Vorlagen-Spalten

Es ist ähnlich wie grid-template-rows , wobei das eine die Rasterzeilen und das andere die Rasterspalten festlegt.

.container {
    Anzeige: Raster;
    Rastervorlagenspalten: 40px 50px automatisch 50px 40px;
    Rastervorlagenzeilen: 25 % 100 Pixel automatisch;
} 

.container {
  Anzeige: Raster;
  Rastervorlagenspalten: 1fr 1fr 1fr;
  Rastervorlagenzeilen: 100px 100px;
} 

Im Grid verfügbare Funktionen

Im Grid-Layout können wir auch die folgenden 3 Funktionen verwenden

wiederholen()

Mit der repeat können große und wiederholte Ausdrücke prägnanter ausgedrückt werden.

Beispielsweise können wir in den obigen grid-template-columns: 1fr 1fr 1fr; es als repeat(3, 1fr) schreiben. Der erste Parameter ist die Anzahl der Wiederholungen und kann auto-fill oder auto-fit sein.

auto-fill

Wenn der Container eine explizite Größe oder eine Maximalgröße hat, dann ist die Anzahl der Wiederholungen die größtmögliche positive Ganzzahl, die nicht dazu führt, dass das Raster seinen Rastercontainer überläuft. Wenn eine beliebige Anzahl von Wiederholungen überlaufen würde, beträgt die Anzahl der Wiederholungen 1.

auto-fit

Gleiches Verhalten wie bei auto-fill , mit der Ausnahme, dass nach dem Platzieren der Rasterelemente alle leeren Wiederholungsspuren ausgeblendet werden.

#Behälter {
  Anzeige: Raster;
  Rastervorlagenspalten: Wiederholung (2, 50px 1fr) 100px;
  Gitterabstand: 5px;
  Box-Größe: Rahmenbox;
  Höhe: 200px;
  Breite: 100 %;
  Hintergrundfarbe: #8cffa0;
  Polsterung: 10px;
}

#container > div {
  Hintergrundfarbe: #8ca0ff;
  Polsterung: 5px;
} 

minmax()

Definiert ein abgeschlossenes Intervall mit einem Längen- und Breitenbereich. Es akzeptiert zwei Parameter: Minimum und Maximum. Es gibt den Wert in diesem Intervall zurück.

Beispielsweise kann der Maximalwert minmax(max-content, 300px) nicht größer als 300px sein.

minmax(200px, 1fr) kann nicht kleiner als 200px sein

Inhalt anpassen ()

Es ist gleichbedeutend mit min(maximum size, max(minimum size, argument)) . Die Parameter können Längenwerte und Prozentwerte sein.

Es nimmt einen Maximalwert aus dem Minimalwert des Inhalts und des Parameters und nimmt dann einen Minimalwert aus dem Maximalwert des Inhalts.

Das heißt, wenn der Inhalt klein ist, wird die Inhaltslänge übernommen. Wenn der Inhalt groß ist und die Inhaltslänge größer als die Parameterlänge ist, wird die Parameterlänge übernommen.

Raster-Vorlagenbereiche

Dieser Attribut-Rasterblock muss mit grid-area verwendet werden und sein Wert kann none oder字符串sein.

Wenn es sich um eine Zeichenfolge handelt, generiert jede angegebene Zeichenfolge eine Zeile und jede durch ein Leerzeichen getrennte Zelle in einer Zeichenfolge generiert eine Spalte. Mehrere Zellen mit demselben Namen, die sich über benachbarte Zeilen oder Spalten erstrecken, werden als Rasterbereich bezeichnet. Nicht rechteckige Rasterblöcke sind ungültig.

#Seite {
  Anzeige: Raster;
  Breite: 100 %;
  Höhe: 250px;
  Rastervorlagenbereiche: „Kopf Kopf“
                       "Hauptnavigation"
                       "Navigationsfuß";
  Rastervorlagenzeilen: 50px 1fr 30px;
  Rastervorlagenspalten: 150px 1fr;
}

#Seite > Header {
  Gitterbereich: Kopf;
  Hintergrundfarbe: #8ca0ff;
}

#Seite > nav {
  Rasterbereich: Navigation;
  Hintergrundfarbe: #ffa08c;
}

#Seite > Haupt {
  Rasterbereich: Hauptbereich;
  Hintergrundfarbe: #ffff64;
}

#Seite > Fußzeile {
  Gitterfläche: Fuß;
  Hintergrundfarbe: #8cffa0;
} 

Die Zeichenfolge grid-template-areas ist mit grid-area des Rasterelements verknüpft und wird zum Definieren eines Bereichs verwendet.

Raster-Vorlage

Es ist eine Abkürzung für grid-template-rows , grid-template-columns und grid-template-areas .

Sein Wert kann in drei Fälle unterteilt werden:

• none
• rows/columns -Syntax kann nur beim Definieren von Zeilen und Spalten verwendet werden, z. B. grid-template: 100px 1fr / 50px 1fr;
• Wenn alle drei vorhanden sind, werden sie durch ein / getrennt und die rechte Seite besteht weiterhin columns , aber die Syntax auf der linken Seite ist <line-names>? <string> <track-size>? <line-names>? .

.Seite {
    Rastervorlage: [Kopfzeile oben] "aa a" [Kopfzeile unten]
                   [Haupt-oben] "bb b" 1fr [Haupt-unten]
                   /auto 1fr auto;
}
/*
Zeilennamen sind optional, benutzerdefinierte Namen müssen in Klammern gesetzt werden, sie entsprechen eigentlich dem mit dem Kommentarstring verknüpften Wert für den Rasterbereich und der Spurgröße, der Größe dieser Zeile */

#Seite {
  Anzeige: Raster;
  Breite: 100 %;
  Höhe: 200px;
  Rastervorlage: [Header links] „Kopf Kopf“ 30px [Header rechts]
                 [Haupt-links] "Hauptnavigation" 1fr [Haupt-rechts]
                 [Fußzeile links] "Nav Fuß" 30px [Fußzeile rechts]
                 / 120px 1fr;
}

Kopfzeile {
  Hintergrundfarbe: Limettengrün;
  Gitterbereich: Kopf;
}

Navigation {
  Hintergrundfarbe: hellblau;
  Rasterbereich: Navigation;
}

hauptsächlich {
  Hintergrundfarbe: gelb;
  Rasterbereich: Hauptbereich;
}

Fußzeile {
  Hintergrundfarbe: rot;
  Gitterspalte: Fuß;
} 

Raster-Zeilen-Lücke / Zeilen-Lücke

Wird verwendet, um die Abstandsgröße zwischen Zeilenelementen festzulegen. Der Wert kann Länge, Prozentsatz oder normal sein.

Das CSS-Rasterlayout wurde ursprünglich mit der Eigenschaft „grid-row-gap“ definiert, die jetzt durch „row-gap“ ersetzt wird. Um jedoch mit Browsern kompatibel zu sein, die die Row-Gap-Eigenschaft nicht unterstützen, müssen Sie die Eigenschaft mit einem Präfix verwenden.

.Kasten{
    Gitterzeilenabstand: 1em;
} 

Gitterspaltenlücke / Spaltenlücke

Wird verwendet, um die Abstandsgröße zwischen den Elementspalten festzulegen. Der Wert kann Länge, Prozentsatz oder normal sein.

Der Standardabstand für normal mehrspaltiges Layout beträgt 1em, und der Standardabstand für andere Layouttypen beträgt 0.

Wie grid-row-gap wird es nach und nach durch column-gap ersetzt.

.Seite {
    Rasterspaltenlücke: 1em;
} 

Gitterlücke / Lücke

Es handelt sich um eine Abkürzung der beiden oben genannten Eigenschaften und die Syntax lautet row-gap column-gap . Wenn column-gap nicht angegeben ist, wird er auf den gleichen Wert wie row-gap gesetzt.

Es wurde auch nach und nach durch gap ersetzt.

#Netz {
  Anzeige: Raster;
  Höhe: 200px;
  Rastervorlage: Wiederholung (3, 1fr) / Wiederholung (3, 1fr);
  Lücke: 20px 5px;
}

#Raster > div {
  Hintergrundfarbe: Limettengrün;
} 

Implizit erstellte Zeilen und Spalten

Das CSS-Raster passt die Position jedes Elements im Raster automatisch anhand der Größe und Spannweite der umgebenden Elemente an.

Zum Beispiel:

.Kasten {
  Anzeige: Raster;
  Rastervorlage: 25px / 100px 160px;
  Hintergrund: #000;
}
.Kasten * {
  Hintergrund: #ccc;
}
.box *:n-tes Kind(gerade) {
  Hintergrund: #777;
} 

Wir haben nur eine Zeile und zwei Spalten definiert. Aber wir haben 5 untergeordnete Elemente. CSS Grid beschließt, sie in den implizit erstellten Bereich auszudehnen, und die Spalten in der neu erstellten impliziten Zeile erben automatisch die Zeilenhöhe von der zuvor angegebenen grid-template-rows Eigenschaft.

Die vier Eigenschaften grid-column-start , grid-column-end , grid-row-start und grid-row-end befinden sich auf dem Rasterelement. Sie können die Position eines Rasterelements definieren. Wenn wir seine Position außerhalb des von uns definierten Rasters festlegen, werden zu diesem Zeitpunkt implizit Zeilen oder Spalten erstellt.

Raster-Auto-Zeilen

Gibt die Größe der implizit erstellten Zeilen an. Seine Werte können sein:

• 長度值: px em vmax usw.
• 百分比: relativ zum Rastercontainer
• flex : Ein nicht negativer Wert, der die Einheit fr verwendet, um den Elastizitätskoeffizienten der Gitterspurgröße zu definieren. Jede Rasterspur mit definiertem flex wird proportional zum verbleibenden verfügbaren Platz zugewiesen
• Das Schlüsselwort max-content gibt an, dass der maximale Inhalt des Rasterelements die Rasterspur einnimmt.
• Das Schlüsselwort min-content gibt an, dass die Rasterspur durch den größten und kleinsten Inhalt des Rasterelements belegt ist.
• auto Wenn die Rasterspur ihre maximale Größe hat, entspricht dies max-content ; wenn sie ihre minimale Größe hat, entspricht dies min-content

Sein Wert ist derselbe wie bei grid-template-rows .

.Kasten {
  Anzeige: Raster;
  Rastervorlage: 25px / 100px 160px;
  Lücke: 10px 20px;
  Raster-Auto-Zeilen: 50px;
  Hintergrund: #000;
}
.Kasten * {
  Hintergrund: #ccc;
}
.box *:n-tes Kind(gerade) {
  Hintergrund: #777;
} 

Raster-Auto-Spalten

Gibt die Spaltenbreite des implizit erstellten Rasters an. Sein Wert ist derselbe wie bei grid-auto-rows .

#Netz {
  Höhe: 100px;
  Anzeige: Raster;
  Rastervorlagenbereiche: „a a“;
  Rasterabstand: 10px;
  Raster-Auto-Spalten: 200px;
}

#Raster > div {
  Hintergrundfarbe: Limettengrün;
} 

Raster-Auto-Flow

Steuert die Funktionsweise des automatischen Layoutalgorithmus und gibt genau an, wie die automatisch angeordneten Elemente im Raster angeordnet werden.

Wenn wir mehrere div in ein div schreiben und beim übergeordneten display: grid; setzen, sehen wir, dass sich optisch nichts geändert hat. Wenn wir jedoch grid-auto-flow: column; zum übergeordneten div hinzufügen, stellen wir fest, dass die untergeordneten Elemente nun in einer Zeile angezeigt werden, was dem Effekt einer flexiblen Box ähnelt.

Die Werte für grid-auto-flow lauten wie folgt:

• Zeile gibt an, dass der automatische Layoutalgorithmus die Elemente anordnen soll, indem er jede Zeile ausfüllt und bei Bedarf neue Zeilen hinzufügt. (Standardwert)
• Spalte gibt an, dass der automatische Layout-Algorithmus die Elemente anordnet, indem er jede Spalte einzeln ausfüllt und bei Bedarf neue Spalten hinzufügt.

Sie können nach diesen beiden Schlüsselwörtern auch das Schlüsselwort dense hinzufügen. Die Syntax ist [ row | column ] || dense .

Dieses Schlüsselwort gibt an, dass der automatische Layout-Algorithmus einen „dichten“ Packalgorithmus verwendet, der versucht, die Lücken zu füllen, die von kleineren Elementen im Raster hinterlassen werden. Dadurch werden die Lücken gefüllt, die das größere Element hinterlassen hat, es kann jedoch auch die ursprüngliche Reihenfolge des Erscheinens durcheinander geraten.

Wenn es weggelassen wird, wird ein „spärlicher“ Algorithmus verwendet und der Layoutalgorithmus bewegt sich beim Anordnen der Elemente im Raster nur „vorwärts“ und geht nie zurück, um die Lücken zu füllen. Dadurch wird sichergestellt, dass alle Auto-Layout-Elemente „in der richtigen Reihenfolge“ erscheinen, auch wenn dadurch Lücken entstehen, die durch spätere Elemente gefüllt werden.

grid-auto-flow: row;

grid-auto-flow: row dense;

Netz

grid ist eine CSS-Kurzeigenschaften, die fast alle oben genannten Eigenschaften (außer gap ) umfasst.

Wenn eine der untergeordneten Eigenschaften nicht deklariert ist, werden, wie bei anderen Kurzeigenschaften, ihre Anfangswerte verwendet. Darüber hinaus werden die Rinnen des Rasters durch diese Deklaration zurückgesetzt, obwohl diese Kurzdeklaration sie nicht festlegt.

Seine Werte können in 3 Kategorien unterteilt werden

grid-template

Es ist dasselbe wie grid-template , z. B. grid: [linename1] "a" 100px [linename2];

grid-template-rows / [ auto-flow && dense? ] grid-auto-columns?

grid-template-rows legt die Zeilenhöhe fest ( grid-template-columns ist auf none gesetzt ), auto-flow nach / muss geschrieben werden ( grid-auto-flow ist auf column gesetzt ) und schließlich gibt grid-auto-columns an, wie die Spaltenspur automatisch wiederholt werden soll ( die Eigenschaft grid-auto-rows ist auf auto gesetzt ).

Beispielsweise grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;

[ auto-flow && dense? ] grid-auto-rows? / grid-template-columns

Diese Schreibmethode ist das Gegenteil der vorherigen. Diese Methode legt grid-template-columns fest ( rows Zeilenattribut ist none ). Legen Sie optional grid-auto-rows Eigenschaft fest ( columns sind auto ).

Wie grid: auto-flow dense / 30%;

Eigenschaften von Rasterelementen

Rasterzeilenanfang, Rasterzeilenende, Rasterspaltenanfang, Rasterspaltenende

Geben Sie jeweils die Zeilenstartposition, Zeilenendposition, Spaltenstartposition und Spaltenendposition des Rasterelements im Raster an.

Hierzu müssen Sie das zuvor eingeführte Konzept der Rasterlinien verstehen. Horizontale Linien (Zeilen) steigen von oben nach unten an, vertikale Linien (Spalten) steigen von links nach rechts an und beide beginnen bei 1.

Sie können folgende Werte annehmen:

auto bedeutet automatische Platzierung, automatischer Bereich oder span ist 1.數字stellt den span 數字stellt die Anzahl der überspannten Raster dar.數字kleiner oder gleich 0 sind ungültig. Bei Überschreiten der Rastergröße werden implizit Zeilen bzw. Spalten erzeugt.

Es ist etwas ähnlich wie table

Wenn Sie die Position über die angegebene Größe hinaus einstellen, erhalten Sie instabile Ergebnisse, was vermieden werden sollte.

.Kasten {
  Anzeige: Raster;
  Raster: 100px 100px / 100px 100px;
  Hintergrund: #000;
}
.Kasten * {
  Hintergrund: #ccc;
}
.box *:n-tes Kind(gerade) {
  Hintergrund: #777;
}
.box1 {
  Rasterspaltenanfang: Spanne 5;
} 

Rasterzeile, Rasterspalte

grid-row und grid-column sind Abkürzungen der oben genannten vier Eigenschaften.

Die Syntax für ihre Werte ist start / end . Wenn nur ein Wert vorhanden ist, ist dieser start end -Wert ist der Standardwert auto .

Wenn die Anzahl der Spalten unbekannt ist, können Sie -1 verwenden, um sie bis zum Ende des Rasters zu erweitern.

Verwenden negativer Werte

Gitterfläche

Oben haben wir die Verwendung von grid-area in Kombination mit grid-template-areas gezeigt. grid-area ist eigentlich eine Abkürzung von grid-row-start , grid-column-start , grid-row-end und grid-column-end .

Der Standardwert ist grid-area: auto;

Wenn 4 Werte festgelegt sind, ist die Reihenfolge:

grid-area: row-start / column-start / row-end / column-end;

Wenn 3 Werte eingestellt sind, ist der letzte auto

Wenn 2 Werte eingestellt sind, sind die letzten beiden auto

Wenn 1 Wert eingestellt ist, werden die nächsten drei auto

Wenn das erste Element自定義表示ist, sind alle ignorierten Elemente benutzerdefinierte Darstellungen.

.box1 {
  Gitterfläche: a / a;
}

/* entspricht */

.box1 {
    Rasterzeilenstart: a;
    Rasterspaltenanfang: a;
    Gitterzeilenende: a;
    Gitterspaltenende: a;
}

Ausrichtung des Rasterelementinhalts

Wir können align-self und justify-self verwenden, um die Inhaltsausrichtung des Rasterelements anzupassen.

align-self wird für die vertikale Ausrichtung justify-self für die horizontale Ausrichtung verwendet.

selbst ausrichten

Auch Flex-Layouts können diese Eigenschaft nutzen. Normalerweise werden die folgenden drei Werte verwendet:

1. Start: Inhalt wird oben ausgerichtet
2. center: der Inhalt wird vertikal zentriert
3. Ende: Inhalt unten ausgerichtet

rechtfertigen-sich

Normalerweise werden die folgenden drei Werte verwendet:

• start / left : Inhalt wird linksbündig ausgerichtet
• cneter : zentriert den Inhalt horizontal
• end / right : Inhalt ist rechtsbündig

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.