Gitterartikel in CSS | Erklärt

Grid ist ein CSS -Layoutmodell, mit dem die Benutzer Elemente anordnen können, die auf einer Website in verschiedenen Zeilen und Spalten angezeigt werden. Dieses Modell verteilt sich im Grunde genommen eine Webseite in Abschnitte und richtet Elemente ohne die Verwendung von Positions- und schwebenden Eigenschaften aus. Es verfügt über zwei Komponenten, einen Container und Elemente. In diesem Beitrag werden wir jedoch hervorheben, was ein Gitterelement ist und welche verschiedenen Eigenschaften damit verbunden sind.

Was ist ein Gitterartikel

Ein Rasterelement ist ein untergeordnetes Element, das in einem Gitterbehälter vorhanden ist. In einem Container standardmäßig ist in jeder Zeile ein Element für jede Spalte vorhanden. Sie können jedoch Rasterelemente über zahlreiche Zeilen und Spalten umfassen.

Es gibt zahlreiche Eigenschaften, die mit einem Netzelement verbunden sind, das seine Eigenschaften definiert. Wir haben diese Eigenschaften unten erklärt.

Grid -Elementeigenschaften

Die Eigenschaften, die mit einem Netzelement verknüpft sind, werden nachstehend ausführlich erläutert.

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
Angenommen, Sie möchten ein bestimmtes Element in der ersten Zeile des Containers hier platzieren, wie es gemacht wird.

Html

1
2
3
4
5
6

Um einen Gitterbehälter zu generieren, haben wir ein DIV -Element mit „Containerelementen“ erstellt und bestimmte Rasterelemente in den Container platzieren, haben wir sechs Div -Elemente innerhalb des Grid Container Div mit jeweils eine andere Klasse verschachtelt.

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 weisen wir zunächst die größere Div -DIV ein Gitterdisplay zu, um es zu einem Rastercontainer zu machen, dann geben wir an, dass es drei Spalten im Gitter mit einer Breite von 200px gibt und eine Lücke von 5px hat. Der Behälter hat auch einige Hintergrundfarbe und Polsterung erhalten. Zuletzt sagen wir, dass der dritte Element zu Beginn von Zeile 1 angezeigt wird.

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

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 der Spalte, in der der Element angezeigt wird.

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

CSS

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

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

Im obigen Code haben wir jeweils vier Spalten mit einer 200px-Breite erstellt und dann die Eigenschaft mit der Grid-Spalte-Start-Eigenschaft in Spalte 2 unter Verwendung von Punkt 1 platzieren.

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
Lassen Sie uns einen Artikel über 2 Reihen übernehmen.

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

.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 endet, das angezeigt wird.

Beispiel
Lassen Sie uns eine Elementspanne über zwei Spalten erstellen.

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.

Gitterreihe Eigenschaft

Zur Definition des Standorts und der Größe eines Gitterartikels wird die Grid-Row-Eigenschaft verwendet. Darüber hinaus handelt es sich um eine Kurzeigenschaft für die unten genannten 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 endet.

Beispiel
Betrachten Sie das folgende Beispiel unten.

CSS

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

.zwei
Gitterreihe: 1 / Span 2;

In dem obigen Code haben wir angegeben, dass Artikel 2 in Zeile 1 platziert wird 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 endet 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äß.

Eigentum in Gitterfläche

Diese Eigenschaft wird verwendet, um die Position und 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: 2 /1 / Span 2 / Span 3;

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 zweiten Reihe, in der ersten Spalte sowie in 2 Zeilen und 3 Spalten platziert.

Ausgang

Die Immobilie wurde erfolgreich umgesetzt.

Abschluss

Ein Rasterelement ist ein untergeordnetes Element, das in einem Gitterbehälter vorhanden ist. In einem Container standardmäßig ist in jeder Zeile ein Element für jede Spalte vorhanden. Um einem Rasterelement unterschiedliche Eigenschaften zuzuweisen, sind damit zahlreiche Eigenschaften wie Gitterreihe, Gittersäule, Gitterfläche usw. verbunden, usw. Dieser Leitfaden lehrt Ihnen, was ein Netzelement ist und wie Sie diese Elemente mit den zugehörigen Eigenschaften zusammen mit geeigneten Beispielen auf eine bestimmte Weise verhalten können.