Was ist CSS Grid?

Die Zuweisung geeigneter Positionen zu Elementen ist bei der Gestaltung einer Website von großer Bedeutung. In CSS stehen verschiedene Eigenschaften und Layouts zur Verfügung, die diese Aufgabe ausführen. Ein solches Layout ist das CSS -Gittermodul, das Elemente in Zeilen und Säulen arrangiert. Der Schwerpunkt dieses Artikels liegt darauf zu betonen, was dieses Layout ist und wie es verwendet werden kann.

Lass uns anfangen.

Was ist CSS Grid

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 aus.

Ein Grid positioniert Elemente in Bezug auf die Webseite oder andere Elemente auf der Webseite. Im Folgenden haben wir eine visuelle Darstellung eines CSS -Gitterlayouts gezeigt.

Ein Netzlayoutmodell funktioniert mit allen neuesten Browsern. Es besteht aus zwei Komponenten, die sind Rasterbehälter Und Gitterartikel. Im Folgenden haben wir sie ausführlich erklärt.

Rasterbehälter

Ein Gitterbehälter ist ein übergeordnetes Element, das die in Zeilen platzierten Rasterelemente und Spalten enthält. Um ein Element zum Verhalten eines Gittercontainers zu übernehmen.

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.

Hier ist eine grafische Darstellung des Gitterbehälters und der Rasterelemente.

Wie bereits erwähnt, unterteilt ein CSS -Gitter eine Webseite in Zeilen und Spalten, um Elemente anzuordnen. Diese Zeilen und Spalten zusammen mit anderen wichtigen Gitterterminologien werden nachstehend erläutert.

Spalten in einem Raster

Die vertikalen Linien in einem Raster, in dem Elemente platziert werden, werden als Säulen in einem Raster angesehen. Ein Netzsystem kann mindestens zwei und höchstens zwölf oder mehr Spalten haben.

Reihen in einem Raster

Die horizontalen Linien in einem Raster, in dem Elemente platziert werden, werden als Reihen in einem Raster angesehen. Ein Netzsystem kann zahlreiche Zeilen haben.

Lücken in einem Raster

Der Bereich zwischen jeder Reihe und der Spalte wird als Lücken bezeichnet.

Zeilen in einem Netz

Die Zeilen zwischen jeder Zeile werden als Zeilenlinien bezeichnet, während die Linien zwischen jeder Spalte als Spaltenzeilen bezeichnet werden.

Es gibt viele Eigenschaften, die mit dem CSS -Netz verbunden sind. Wenden Sie sich an den nächsten Abschnitt, um sie zu erfahren.

Gittereigenschaften

Die folgende Tabelle bietet einen Überblick über die Gitterlayouteigenschaften.

Eigenschaften	Beschreibung
Grid-Template-Säulen	Diese Eigenschaft gibt die Anzahl und Größe der Spalten in einem Netzlayout an.
Raster-Template-Reihen	Es beschreibt die Größe der Zeilen in einem Netzsystem.
Grid-Template-Areas	Diese Eigenschaft weist verschiedene Elemente in einem Raster Namen zu.
Raster-Auto-Säulen	Es legt die anfängliche Größe einer Spalte fest.
Raster-Auto-Reihen	Diese Eigenschaft legt die Anfangsgröße einer Reihe fest.
Gitter-Auto-Flow	Es heißt, wie automatische Elemente in einem Gittersystem positioniert sind.
Raster-Reihe-Start	Diese Eigenschaft besagt, wo Sie einen Artikel in einem Netz beginnen sollen.
Raster-Säulen-Start	Es führt dieselbe Funktion wie die obige Eigenschaft aus.
Raster-Row-End
Raster-Säulen-Ende	Es führt dieselbe Funktion wie die obige Eigenschaft aus.
Gitterfläche	Diese Eigenschaft wird verwendet, um einen bestimmten Netzbereich zu benennen.
Zeilenlücke	Diese Eigenschaft gibt eine Lücke zwischen Reihen an.
Säulenlücke	Es gibt Lücke zwischen den Spalten an.

Lassen Sie uns das Netzsystem mit Hilfe eines Beispiels weiter verstehen.

Beispiel

In dem nachstehenden Beispiel haben wir ein einfaches Gitterlayout erstellt. Die Skizze des Netzes ist unten gezeigt.

Beginnen wir die Codierung.

Html

A
B
C
D

Hier haben wir einfach vier Div -Behälter in einem größeren Div -Behälter verschachtelt. Jedem Div -Element wurde eine Klasse zugewiesen.

CSS

.Container
Anzeige: Grid;
Raster-Lack: 5px;
Grid-Template-Säulen: 120px 120px 120px;

Mit dem der größeren DIV zugewiesenen Klasse „Container“ zeigen wir sie als Gitter an. Darüber hinaus hat eine Lücke von 5px zwischen Zeilen und Spalten zugewiesen. Zuletzt haben wir drei Spalten mit jeweils 120px-Größe mit der Eigenschaft Grid-Template-Säulen erstellt.

CSS

.Artikel
Hintergrundfarbe: Sandybrown;
Farbe weiß;
Border-Radius: 6PX;
Polsterung: 25px;
Schriftgröße: 20px;

Jetzt stylen wir einfach die Elemente im Rasterbehälter mit einigen grundlegenden CSS -Eigenschaften.

CSS

.eins
Grid-Säule: 1/3; / * Gibt den Standort und die Größe des Elements in einer Spalte an */an
Gitterreihe: 1; / * Gibt den Standort und die Größe des Elements innerhalb einer Zeile an */an

Die Grid-Säulen-Eigenschaft legt die Start- und Endposition des Netzelements in einer Spalte fest. Inzwischen definiert die Grid-Row-Eigenschaft die Position eines Elements in einer Reihe. Zum Beispiel beginnt Element 1 im obigen Code -Snippet in Spalte 1 angezeigt und endet in Spalte 3, während es in Zeile 1 angezeigt wird.

CSS

.zwei
Grid-Säule: 3;
Gitterreihe: 1/3;

.drei
Grid-Säule: 1;
Gitterreihe: 2;

.vier
Grid-Säule: 2;
Gitterreihe: 2;

Verwenden der Gittersäule und der Grid-Row-Eigenschaften werden auch die Positionen der Reste der Elemente angegeben.

Ausgang

Es wurde ein einfaches Netzlayout erzeugt.

Abschluss

Mit einem Netzlayoutmodell können seine Benutzer Elemente anordnen, 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 in Bezug auf die Webseite oder andere Elemente auf der Webseite aus. Es besteht aus verschiedenen Elementen, die Grid Container und Grid -Gegenstände sind. Ein Gitterbehälter ist das übergeordnete Element, während Grid -Elemente Kinderelemente sind. In diesem Artikel werden alle notwendigen Details des Grid-Layouts zusammen mit grafischen Darstellungen und einem geeigneten Beispiel erläutert.