Was ist eine Gittereigenschaft?

Die grid-Eigenschaft ist eine Abkürzungseigenschaft für die Raster-Template-Zeilen, Raster-Template-Spalten, Raster-Template-Bereiche, Raster-Auto-Zeilen, Raster-Auto-Spalten, Raster-Auto-Flow, Raster-Spaltenlücke und Eigenschaften der Rasterreihenlücke.

Gitterstruktur

Durch die Rastereigenschaft werden die Elemente wie eine Matrix ⊞ angezeigt

 
 
 
 
 
 
 
 

In CSS

#container {
 Anzeige: Gitter;
 }

In Beispiel wird #container als Raster angezeigt, und die untergeordneten Elemente werden als Rasterzellen oder -elemente angezeigt

Browser-Kompatibilität

Es ist eine große Aufregung, dass IE, Edge und Firefox CSS-Grid-Eigenschaften unterstützen. In den meisten Entwicklertools verfügt der Browser über eine schöne Benutzeroberfläche für die Rasteransicht.

Gitterlinien

Rasterlinien sind horizontale und vertikale Linien, die zur Positionierung verwendet werden. Der Positionierungsindex kann eine ganze Zahl sein (sowohl negative als auch positive ganze Zahlen).

Eigenschaften → Gitterspaltenanfang, Gitterspaltenende, Gitterspaltenende, Gitterspaltenende.

Beispielcode :

#grid> div: n-tes Kind (2) {
 Rasterspaltenstart: 2;
 Rasterspaltenende: 3;
 Rasterreihenstart: 2;
 Gitterreihenende: 3;
}

Element 2 beginnt bei der zweiten vertikalen Linie in 2 horizontalen Linien und Element endet bei 3 vertikalen Linien und 3 vertikalen Linien.

Rasterlinie

Gitterzelle

Eine Gitterzelle ist ein Abstand zwischen zwei benachbarten vertikalen Gitterlinien und den zwei benachbarten horizontalen Gitterlinien.

Gitterzelle

Gitterspuren

Eine Gitterspur ist ein Abstand zwischen zwei benachbarten Gitterlinien. d.h. Reihe, Spalten.

Gitterspur

Grid Area & Grid Gap

Ein Gitterbereich ist die Gruppe von einer oder mehreren Zellen.

Der Rasterabstand ist der Abstand zwischen den Zeilen und den Spalten. Es ist die Abkürzungseigenschaft der Rasterreihenlücke und der Rasterspaltenlücke.

Rasterzeile & Rasterspalte

grid-row ist eine Kurzform für grid-row-start und grid-row-end.

grid-column ist eine Kurzform für grid-column-start und grid-column-end

Gitterreihe

Start der Rasterzeile → Gibt die Startposition eines Rasterelements in der Zeile an

Beispiel: Gitterreihenstart: 2 → Das Element beginnt an der zweiten vertikalen Linie

Gitterzeilenende → legt die Endposition eines Gitterelements in der Zeile fest

Beispiel: Gitterreihenende: 3 → Das Element endet an der zweiten vertikalen Linie

Grid-Auto-Flow

Steuert, wie der automatische Platzierungsalgorithmus funktioniert. Standardmäßig lautet der Wert row (Elemente werden auf Zeilenbasis platziert)

Raster-Auto-Flow: Zeile;
Raster-Auto-Flow: Spalte;
Spalte für automatischen Rasterfluss und Zeile für automatischen Rasterfluss

grid-auto-flow: row dicht → Verwendet den Algorithmus für dichtes Packen. Füllen Sie den freien Platz im Raster zeilenweise aus.

grid-auto-flow: spaltendicht → Verwendet den Packungsalgorithmus "dicht". Füllt den freien Platz im Raster auf Spaltenbasis aus

Explizites Gitter und implizites Gitter

Explizites Raster sind Raster, die vom Benutzer mithilfe von Raster-Vorlagen-Zeilen und Raster-Vorlagen-Spalten erstellt wurden

Raster-Template-Spalten: wiederholen (3, 100px);
Raster-Template-Zeilen: 100px 100px;

Das implizite Raster wird vom Browser erstellt. Die Größe des impliziten Rasters kann mithilfe der Eigenschaft grid-auto-columns und grid-auto-rows geändert werden.

Raster-Template-Spalten: wiederholen (3, 100px);
Raster-Auto-Zeilen: 100px;

Rasterreihenfolge:

Wir können das Element nach Vorlagenbereichseigenschaft ordnen.

Wir können den Vorlagenbereich in der Medienabfrage ändern und eine neue Gitterstruktur anzeigen.

Überprüfen Sie den Codepen für mehr.

Für das Grid verwenden wir meistens alle das Bootstrap-Grid-System. Bootstrap kann in jeder Version einen Klassennamen ändern (aber nicht wie Angular ). Daher müssen wir uns merken, welche Version welchen Klassennamen hat .

Durch die Verwendung der CSS-Rastereigenschaft KÖNNEN WIR (auch in IE ) die Elemente auf einfache Weise in der Rasteransicht anzeigen.

Vielen Dank fürs Lesen! Wenn es Ihnen gefallen hat, unterstützen Sie uns, indem Sie auf klicken und den Beitrag teilen. Fühlen Sie sich frei, einen Kommentar zu hinterlassen unten.