CSS Grideigenschaften | Erklärt

CSS Grid ist ein Layoutmodell, das eine einfache Anordnung von Elementen auf einer Website in verschiedene Zeilen und Spalten ermöglicht. Dieses Modell bewirkt eine Webseite in Abschnitte und richtet Elemente aus. Um dieses Modell zu verwenden, stehen zahlreiche CSS-Eigenschaften zur Verfügung, die wir in diesem Beitrag eingehend erklärt haben.

CSS -Gittereigenschaften

Die Eigenschaften, die mit dem Netzlayoutmodul verbunden sind, werden nachstehend erläutert.

Grid-Template-Säulen-Eigenschaft

Wie wir wissen, dass ein Netzlayout aus zahlreichen Spalten besteht, die eine bestimmte Größe haben, um die Anzahl der Spalten und deren Breite zu sagen, wird die Eigenschaft für Gitter-Template-Säulen verwendet.

Syntax

Grid-Template-Säulen: Keine | Auto | Max-Inhalt | MIN-CONTENT | Länge | initial | erben;

Parameter erklärt
keiner: Es ist ein Standardwert, der bei Bedarf Spalten generiert.

Auto: Dieser Wert bewertet die Breite der Spalten basierend auf der in einer Spalte vorhandenen Inhaltsgröße der Containergröße und der Inhaltsgröße der Elemente.

Maximatoren: Es passt die Spaltenbreite an, die auf dem größten Element in der Spalte basiert.

Minus: Es passt die Spaltenbreite anhand des kleinsten Elements in der Spalte an.

Länge: Dies setzt den angegebenen Wert als Breite der Spalten.

Beispiel
Nehmen wir an, Sie möchten jeweils vier Spalten mit einer im Code angegebenen Länge erstellen, die mit einer Länge angegeben ist. So machst du es.

Html

1
2
3
4
5
6
7
8

Im obigen Code haben wir zum Erstellen eines Gittercontainers ein DIV -Element mit „Containerelementen“ erstellt und bestimmte Rasterelemente in den Container platzieren. Wir haben acht Div -Elemente im Grid Container Div verschachtelt.

CSS

.Container
Anzeige: Grid;
Grid-Template-Säulen: 70px 70px 70px Auto;
Raster-Lack: 5px;
Hintergrundfarbe: Sandybrown;
Polsterung: 10px;

Hier setzen wir die Anzeige des DIV -Elements mit dem „Container“ der Klasse auf Raster, um es zu einem Gitterbehälter zu machen. Dann erstellen wir vier Spalten mit den ersten drei Spalten mit einer Länge von 70px, während die Breite der letzten Spalte auf automatisch eingestellt ist. Jede Säule hat eine Lücke von 5px und eine Sandybrown -Farbe. Schließlich ist die Polsterung des Containers auf 10px eingestellt.

CSS

.items> div
Hintergrundfarbe: Bisque;
Polsterung: 20px;
Text-Align: Mitte;
Schriftgröße: 35px;

Verwenden Sie nun einige grundlegende CSS -Eigenschaften, wir stylen unsere Elemente, die im Container vorhanden sind.

Ausgang

Es wurden vier Spalten mit einer bestimmten Breite erstellt.

Grid-Template-Reihen-Eigenschaft

Ein Netzsystem besteht auch aus bestimmten Zeilen, um die Anzahl der Zeilen zusammen mit ihrer Höhe anzugeben.

Syntax

Grid-Template-Reihen: Keine | Auto | Max-Inhalt | MIN-CONTENT | Länge | initial | erben;

Parameter erklärt
keiner: Es ist ein Standardwert, der bei Bedarf Zeilen generiert.

Auto: Dieser Wert bewertet die Höhe der Zeilen basierend auf der in einer Zeile vorhandenen Inhaltsgröße der Containergröße und der Inhaltsgröße der Elemente.

Maximatoren: Es wird die Zeilenhöhe basierend auf dem größten Artikel in der Reihe anpasst.

Minus: Es passt die Zeilenhöhe basierend auf dem kleinsten Element in der Reihe an.

Länge: Dies setzt den angegebenen Wert als Höhe der Zeilen.

Beispiel
Angenommen, Sie möchten zwei Zeilen mit einer bestimmten Höhe erstellen und dann dem folgenden Code folgen.

Html

.Container
Anzeige: Grid;
Grid-Template-Säulen: Auto Auto Auto Auto;
Raster-Template-Reihen: 150px 250px;
Raster-Lack: 5px;
Hintergrundfarbe: Sandybrown;
Polsterung: 10px;

Im obigen Code haben wir zwei Zeilen generiert. Die erste Reihe hat eine Höhe von 150px, die zweite hat eine Höhe von 250px. Abgesehen davon haben wir auch vier Spalten erstellt, von denen jeweils eine automatische Breite mit einer Lücke von 5px hat.

Ausgang

Es wurden zwei Zeilen mit einer bestimmten Höhe erstellt.

Grid-Template-Areas-Eigenschaft

Zum Zweck der Angabe des Namens der Bereiche in einem Gittersystem wird die Eigenschaft von Grid-Template-Areas verwendet. Es funktioniert so, dass Sie den Bereich mithilfe der Eigenschaft in der Gitterfläche benennen und diesen Namen in dieser Eigenschaft beziehen müssen.

Syntax

Grid-Template-Areas: Keine | Artikelname;

Parameter erklärt
keiner: Es ist ein Standardwert, der keinen Namen für den Netzbereich angibt.

Artikelname: Dieser Wert stellt eine Abfolge dar, wie Zeilen und Spalten in einem Raster angezeigt werden.

Beispiel
So funktioniert diese Eigenschaft.

CSS

.eins
Grid-Gebiet: Itema;

.Container
Anzeige: Grid;
Grid-Template-Areas: 'itema itema…';
Raster-Lack: 5px;
Hintergrundfarbe: Sandybrown;
Polsterung: 10px;

Im obigen Code verweisen wir unter Verwendung der Eigenschaft der Gitterfläche das erste Element des Gitters und verweisen danach diesen Namen in der Eigenschaft für Gitter-Template, die angibt, dass der erste Element den Namen „Elementa“ enthält und nimmt Platz von zwei Säulen von fünf Spalten ein.

Ausgang

Die Eigenschaft funktioniert ordnungsgemäß.

Grid-Template-Eigenschaft

Es ist ein Kurzeigeneignis für die unten genannten Immobilien.

1. Grid-Template-Säulen
2. Raster-Template-Reihen
3. Grid-Template-Areas

Syntax

Grid-Template: Keine | Grid-Template-Reihen/Grid-Template-Säule | Grid-Template-Areas | initial | erben;

Parameter erklärt
keiner: Es ist ein Standardwert, der keine Zeilen und Spalten angibt.

Grid-Template-Säulen: Es gibt die Größe der Spalten an.

Raster-Template-Reihen: Es definiert die Größe der Reihen.

Grid-Template-Areas: Es heißt die Namen der Netzbereiche.

Beispiel
Lassen Sie uns die Nummer und Größe von Zeilen und Spalten auf einmal zuweisen.

CSS

.Container
Anzeige: Grid;
Grid-Template: 200px/ Auto Auto Auto;
Raster-Lack: 5px;
Hintergrundfarbe: Sandybrown;
Polsterung: 10px;

Im obigen Code wurde angegeben, dass zwei Zeilen mit Zeile 1 eine Höhe von 200px und drei Spalten mit einer automatischen Breite für jede Spalte haben.

Ausgang

Die Immobilie wurde erfolgreich umgesetzt…

Raster-Row-Start-Eigenschaft

Wie der Name schon sagt, wird in dieser Eigenschaft angezeigt, in welcher Zeile das Netzelement angezeigt wird.

Syntax

Raster-Row-Start: Auto | Row-Line;

Parameter erklärt
Auto: Dies ist ein Standardwert, der Elemente gemäß dem Fluss des Netzes platziert.

Zeilenlinie: Es heißt, auf welcher Reihe der Artikel angezeigt wird.

Beispiel
Betrachten Sie das folgende Beispiel, um die Arbeit dieser Eigenschaft zu verstehen.

CSS

.Container
Anzeige: Grid;
Grid-Template-Säulen: 200px 200px 200px;
Raster-Lack: 5px;
Hintergrundfarbe: Sandybrown;
Polsterung: 10px;

.drei
Raster-Reihen-Start: 1;

Im obigen Code geben wir zunächst drei Spalten mit einer Breite von 200px an und geben dann an, dass das dritte Element in Zeile 1 angezeigt wird.

Ausgang

Punkt 3 wurde zu Beginn von Reihe 1 platziert.

Grid-Säulen-Start-Eigenschaft

Um anzugeben, in welcher Spalte das Rasterelement angezeigt wird.

Syntax

Grid-Säulen-Start: Auto | Span-n | Spaltenlinie;

Parameter erklärt
Auto: Dies ist ein Standardwert, der Elemente gemäß dem Fluss des Netzes platziert.

Span-n: Es gibt die Anzahl der Spalten an, die der Artikel überspannen muss.

Spaltenlinie: Es definiert, in welcher Spalte der Artikel angezeigt wird.

Beispiel
Angenommen, Sie möchten ein bestimmtes Netzelement in einer bestimmten Spalte platzieren.

CSS

.eins
Grid-Säulen-Start: 2;

Hier verwenden wir die Eigenschaft der Raster-Säulenstart und platzieren Artikel 1 in Spalte 2.

Ausgang

Punkt 1 wurde erfolgreich in Spalte 2 platziert.

Raster-Row-End-Eigentum

Diese Eigenschaft gibt an, in welcher Zeile das Netzelement endet, oder in der Nummer zeichnet ein Rasterelement ab.

Syntax

Raster-Row-End: Auto | Span-n | Zeilenlinie;

Parameter erklärt
Auto: Dies ist ein Standardwert, bei dem ein Element nur eine einzelne Zeile umfasst.

Span-n: Es gibt die Anzahl der Zeilen an, die der Artikel erstrecken muss.

Zeilenlinie: Es definiert, in welcher Zeile das Element endet, das angezeigt wird.

Beispiel
Wenden Sie sich an das folgende Beispiel.

.eins
Grid-Row-End: Span 2;

Im obigen Code erstellen wir Punkt 1 über 2 Zeilen mit der Grid-Row-End-Eigenschaft über 2 Zeilen.

Ausgang

Der Artikel wurde erfolgreich über zwei Reihen überspannt.

Raster-Säulen-End-Eigentum

Diese Eigenschaft gibt an, in welcher Spalte das Rasterelement endet, oder in den Nummernspalten, die ein Rasterelement überspannen wird.

Syntax

Grid-Säulen-Ende: Auto | Span-n | Spaltenlinie;

Parameter erklärt
Auto: Dies ist ein Standardwert, bei dem ein Element nur eine einzige Spalte umfasst.

Span-n: Es gibt die Anzahl der Spalten an, die der Artikel überspannen muss.

Spaltenlinie: Es definiert, in welcher Spalte das Element am Ende angezeigt wird.

Beispiel
Hier erstellen wir eine Elementspanne über zwei Spalten über zwei Spalten.

CSS

.eins
Grid-Säulen-Ende: Span 2;

Der obige Code gibt an, dass Punkt 1 über zwei Spalten überspannt wird.

Ausgang

Artikel 1 über zwei Spalten überschreitet.

Eigentum in Gitterfläche

Diese Eigenschaft wird verwendet, um den Ort und die Größe eines Netzelements zu definieren oder einem Rasterelement einen bestimmten Namen zu geben. Darüber hinaus handelt es sich um eine Kurzeigenschaft für die unten genannten Eigenschaften.

1. Raster-Reihe-Start
2. Raster-Row-End
3. Raster-Säulen-Start
4. Raster-Säulen-Ende

Syntax

Grid-Area: Zeilen-Start / Spaltenstart / Zeilen-End / Spalten-End | Artikelname;

Parameter erklärt
Raster-Reihe-Start: Dieser Wert gibt an, wo ein Element in einer Zeile angezeigt werden soll.

Raster-Säulen-Start: Es heißt, wo ein Element in einer Spalte angezeigt werden soll.

Raster-Row-End: Es beschreibt, wo die Elemente in einer Reihe nicht mehr angezeigt werden soll oder wie viele Zeilen Sie überspannen sollen.

Raster-Säulen-Ende: Es beschreibt, wo die Elemente in einer Spalte nicht mehr angezeigt werden sollen oder wie viele Spalten zu speichern sind.

Artikelname: Dieser Wert gibt den Namen des Netzelements an.

Beispiel
Um die Arbeit dieser Eigenschaft zu verstehen, betrachten Sie das folgende Beispiel.

.Container
Anzeige: Grid;
Grid-Template-Säulen: Auto Auto Auto Auto;
Raster-Lack: 5px;
Hintergrundfarbe: Sandybrown;
Polsterung: 10px;

.Sieben
Gitterfläche: 1/2 / Span 3 / Span 2;

Der obige Code gibt an, dass es jeweils vier Spalten mit einer automatischen Breite gibt. In der Zwischenzeit wird das siebte Element im Raster in der ersten Zeile, in der zweiten Spalte sowie in 2 Zeilen sowie 2 Spalten platziert.

Ausgang

Die Immobilie wurde erfolgreich umgesetzt.

Grid-Auto-Säulen-Eigentum

Diese Eigenschaft bietet eine bestimmte Größe für die Spalten eines Netzlayouts.

Syntax

Grid-Auto-Säulen: Auto | Max-Inhalt | MIN-CONTENT | Länge;

Parameter erklärt
Auto: Dieser Standardwert bewertet die Größe der Spalten basierend auf der Containergröße.

Maximatoren: Es passt die Spaltengröße basierend auf dem größten Element in der Spalte an.

Minus: Es passt die Spaltengröße basierend auf dem kleinsten Element in der Spalte an.

Länge: Dieser Wert legt den angegebenen Wert als Größe der Spalten fest.

Beispiel
Betrachten Sie das folgende Beispiel unten.

CSS

.eins
Gitterfläche: 1 / 1/2/2;

Bevor Sie diese Eigenschaft verwenden. Zum Beispiel haben wir im obigen Code angegeben, dass Punkt 1 zu Beginn von Zeile 1 und Spalte 1 und am Ende von Zeile 2 und Spalte 2 platziert wird. Jetzt werden die Standorte der Reste der Elemente in einem ähnlichen Muster zugeordnet.

CSS

.zwei
Gitterfläche: 1/2 / 2/3;

.drei
Gitterfläche: 1 /3 / 2/4;

.vier
Gitterfläche: 2 /1 / 3/2;

.fünf
Grid-Gebiet: 2 /2 / 3/3;

.sechs
Grid-Gebiet: 2 /3 / 3/4;

Den Rest der Netzelemente wird auch ein gewisses Speicherort mit der Grid-Bereichs-Eigenschaft zugewiesen.

CSS

.Container
Anzeige: Grid;
Grid-Auto-Säulen: 200px;
Raster-Lack: 5px;
Hintergrundfarbe: Sandybrown;
Polsterung: 10px;

Verwenden Sie nun die zu diskutierte Eigenschaft, die Größe der Spalten ist auf 200px gesetzt.

Ausgang

Die Immobilie wurde implementiert.

Grid-Auto-Reihen-Eigenschaft

Diese Eigenschaft bietet eine bestimmte Größe für die Reihen eines Netzlayouts.

Syntax

Raster-Auto-Reihen: Auto | Max-Inhalt | MIN-CONTENT | Länge;

Parameter erklärt
Auto: Dieser Standardwert bewertet die Größe der Zeilen basierend auf der Containergröße.

Maximatoren: Es wird die Zeilengröße basierend auf dem größten Element in der Reihe anpasst.

Minus: Es passt die Zeilengröße basierend auf dem kleinsten Element in der Reihe an.

Länge: Dieser Wert legt den angegebenen Wert als die Größe der Zeilen fest.

Beispiel
Geben wir den Zeilen im Container eine bestimmte Größe mit der zu diskutierenden Eigenschaft an.

CSS

.eins Grid-Gebiet: 1 / 1/2/2;
.zwei Grid-Gebiet: 1 /2 /2 /3;
.drei Grid-Gebiet: 1 / 3/2/4;
.vier Grid-Gebiet: 2 /1 / 3/2;
.fünf Grid-Gebiet: 2 /2 / 3/3;
.Sechs Grid-Gebiet: 2 /3 / 3/4;
.Container
Anzeige: Grid;
Raster-Auto-Reihen: 200px;
Raster-Lack: 5px;
Hintergrundfarbe: Sandybrown;
Polsterung: 10px;

Genau wie die Eigenschaft für Gitter-Auto-Säulen müssen wir zuerst die Rasterelemente mithilfe der Grid-Fläche-Eigenschaft und dann mit der Eigenschaft der Raster-Auto-Reihen die Größe der Zeilen auf 200px einstellen.

Ausgang

Jede Zeile wurde erfolgreich zugewiesen.

Grid-Auto-Flow-Eigenschaft

Diese Eigenschaft übernimmt, wie automatisch positionierte Rasterelemente in den Behälter platziert werden.

Syntax

Grid-Auto-Flow: Row | Spalte | dichter | Reihe Dense | Säule dicht;

Parameter erklärt
Reihe: Dieser Standardwert platziert Elemente, die alle Zeilen füllen.

Spalte: Dieser Wert platziert Elemente, die alle Spalten füllen.

dicht: Dieser Wert füllt Räume im Netz, indem sie Elemente in diese Räume platzieren.

Reihe dicht: Es platziert Gegenstände, die alle Reihen füllen und keine Löcher im Netz lassen.

Säule dicht: Es platziert Elemente, die alle Spalten füllen und keine Löcher im Netz lassen.

Beispiel
Angenommen, Sie möchten Ihre Netzelemente platzieren, die jede Spalte füllen.

CSS

.Container
Anzeige: Grid;
Grid-Template-Säulen: Auto Auto Auto Auto;
Grid-Template-Reihen: Auto Auto;
Grid-Auto-Flow: Säule;
Raster-Lack: 5px;
Hintergrundfarbe: Sandybrown;
Polsterung: 10px;

Im obigen Code haben wir zunächst vier Spalten mit einer automatischen Breite erstellt, dann haben wir jeweils zwei Zeilen mit einer automatischen Höhe generiert. Anschließend verwenden wir die Grid-Auto-Flow-Eigenschaft, um Elemente zu platzieren, die jede Spalte füllen.

Ausgang

Die Eigenschaft funktioniert ordnungsgemäß.

Gitterreihe Eigenschaft

Zur Definition der Position und Größe eines Gitterelements wird die Grid-Row-Eigenschaft verwendet. Darüber hinaus handelt es sich um eine Kurzeigenschaft für folgende Immobilien.

1. Raster-Reihe-Start
2. Raster-Row-End

Syntax

Rasterreihe: Gitter-Reihen-Start / Gitter-Row-End;

Parameter erklärt
Raster-Reihe-Start: Es heißt, auf welcher Reihe der Artikel angezeigt wird.

Raster-Row-End: Es definiert, in welcher Zeile der Artikel am Ende angezeigt wird.

Beispiel
Hier ist ein Beispiel für diese Eigenschaft.

CSS

.zwei
Gitterreihe: 1 / Span 2;

In dem obigen Code haben wir festgestellt, dass Punkt 2 in Zeile 1 platziert und über 2 Zeilen überschritten wird. In der Zwischenzeit hat das Raster jeweils vier Säulen mit einer automatischen Breite von jeweils vier Säulen.

Ausgang

Das Kurzeigeneignis wurde ordnungsgemäß umgesetzt.

Grid-Säulen-Eigenschaft

Um die Position und Breite eines Netzelements zu beschreiben, wird die Grid-Row-Eigenschaft verwendet. Darüber hinaus handelt es sich um eine Abkürzungseigenschaft für die hier aufgeführten Immobilien.

1. Raster-Säulen-Start
2. Raster-Säulen-Ende.

Syntax

Grid-Säule: Raster-Säule-Start / Grid-Säule;

Parameter erklärt
Raster-Säulen-Start: Es heißt, in welcher Spalte der Artikel angezeigt wird.

Raster-Säulen-Ende: Es definiert, in welcher Spalte das Element am Ende angezeigt wird.

Beispiel
Hier ist ein Beispiel für diese Eigenschaft.

CSS

.eins
Grid-Säule: 2 / Span 2;

Der obige Code gibt an, dass Punkt 1 in Spalte 2 platziert wird und über 2 Spalten überspannt wird.

Ausgang

Die Eigenschaft funktioniert ordnungsgemäß.

Reihenverbindungseigenschaft

Wie der Name schon sagt, gibt die Eigenschaft Zeilen-Gap-Eigenschaft die Lücke zwischen Gitterreihen an.

Syntax

Zeilenklappe: Länge | Normal | initial | erben;

Parameter erklärt
Länge: Es gibt die Lücke zwischen Reihen an.

normal: Es definiert eine normale Lücke zwischen Zeilen und ist ein Standardwert.

Beispiel
Wenden Sie sich an das folgende Beispiel, um diese Eigenschaft zu verstehen.

CSS

.Container
Anzeige: Grid;
Grid-Template-Säulen: Auto Auto Auto;
Zeilenklappe: 60px;
Hintergrundfarbe: Sandybrown;
Polsterung: 10px;

Im obigen Code haben wir angegeben, dass die Lücke zwischen jeder Zeile 60px beträgt.

CSS

.items> div
Hintergrundfarbe: Bisque;
Grenze: 1PX Solid Black;
Polsterung: 20px 0;
Text-Align: Mitte;
Schriftgröße: 35px;

Dieser Code entspricht oben mit dem einzigen Unterschied, dass wir den Elementen innerhalb des Netzes Grenzen hinzugefügt haben, um das Konzept der Kluft zwischen Zeilen zu demonstrieren.

Ausgang

Die Kluft zwischen Zeilen wurde erfolgreich umgesetzt.

Eigenschaft Säulenlücken

Diese Eigenschaft gibt die Lücke zwischen Gittersäulen an.

Syntax

Säulenlücke: Länge | Normal | initial | erben;

Parameter erklärt
Länge: Es gibt die Lücke zwischen Spalten an.

normal: Es definiert eine normale Lücke zwischen den Spalten und ist ein Standardwert.

Beispiel
Fügen wir eine bestimmte Lücke zwischen den Spalten in einem Raster hinzu.

CSS

.Container
Anzeige: Grid;
Grid-Template-Säulen: Auto Auto Auto;
Säulenlücke: 60px;
Hintergrundfarbe: Sandybrown;
Polsterung: 10px;

Hier haben wir eine Lücke von 60px zwischen jeder Spalte hinzugefügt.

Ausgang

Die Lücke zwischen den Spalten wurde hinzugefügt.

GAP -Eigentum

Um die Lücke zwischen Zeilen und Spalten auf einmal anzugeben, wird die Gap -Eigenschaft verwendet. Es ist ein Kurzeigeneignis für die folgenden.

1. Zeilenlücke
2. Säulenlücke

Syntax

GAP: Zeilen-Lack-Spalten-Lücke;

Parameter erklärt
Zeilenlücke: Es fügt eine Lücke zwischen Reihen hinzu.

Säulenlücke: Es fügt eine Lücke zwischen den Spalten hinzu.

Beispiel
Lassen Sie uns auf einmal eine Lücke zwischen Zeilen und Spalten einstellen.

CSS

.Container
Anzeige: Grid;
Grid-Template-Säulen: Auto Auto Auto;
Lücke: 65px;
Hintergrundfarbe: Sandybrown;
Polsterung: 10px;

Im obigen Code haben wir angegeben, dass zwischen jeder Zeile und jeder Spalte eine Lücke von 65px vorhanden ist.

Ausgang

Die Eigenschaft funktioniert ordnungsgemäß.

Abschluss

CSS Grid ist ein Layoutmodell, das eine einfache Anordnung von Elementen auf einer Website in verschiedene Zeilen und Spalten ermöglicht. Darauf sind zahlreiche Eigenschaften verbunden, wie z. Jede dieser Eigenschaften dient einem anderen Zweck, den wir in diesem Beitrag zusammen mit relevanten Beispielen erklärt haben.