Grid Containereigenschaften in CSS | Erklärt

CSS bietet ein Netzlayoutmodell, mit dem es möglich ist, ein zweidimensionales Layout auf einer Website zu erstellen. Das zweidimensionale Verhalten des CSS-Gitters ermöglicht die Ausrichtung der Rasterelemente in Zeilen und Säulen. CSS Grid Containereigenschaften können verwendet werden, um unterschiedliche Funktionen wie Inhaltsausrichtung, Elementausrichtung usw. zu erreichen.

Dieser Artikel bietet einen umfassenden Leitfaden für den Rastercontainer und deckt in dieser Hinsicht die folgenden grundlegenden Konzepte des Gitterbehälters ab:

• Was ist ein Gitterbehälter in CSS
• Die Anzeigeeigenschaft
• Gitterbehältereigenschaften in CSS
• So verwenden Sie Grid Containereigenschaften in CSS

Also beginnen wir beginnen!

Was ist ein Gitterbehälter?

Ein Gitterbehälter ist ein Box/Container, der Rasterelemente enthält und diese Elemente in die Zeilen und Spalten platzieren kann.

Die Anzeigeeigenschaft

Um einen Rastercontainer zu erstellen, müssen wir die Anzeigeeigenschaft verwenden und ihren Wert entweder als Inline-Gitter oder als Gitter festlegen. Der folgende Snippet zeigt die grundlegende Syntax der Anzeigeeigenschaft:

Anzeige: Wert;

Beispiel 1

Im folgenden Code-Snippet erstellen wir einen Rastercontainer und im Container werden wir fünf Kinderelemente deklarieren:

Erster Gegenstand
Zweiter Artikel
Dritter Artikel
Vierter Artikel
Fünfter Artikel
Sechster Artikel

Die jeweiligen Stilklassen für Gitterbehälter und Gitterartikel sind wie folgt:

Das obige Code -Snippet zeigt die folgende Ausgabe an:

Die Ausgabe überprüft, ob sowohl Rasterbehälter- als auch Rasterelemente gemäß ihren jeweiligen Stilklassen gestaltet sind.

Gitterbehältereigenschaften in CSS

Die unten angegebene Tabelle enthält eine kurze Anleitung für die Grid Containereigenschaften:

Eigenschaften	Beschreibung
Grid-Template-Säulen und Raster-Template-Reihen	Bestimmen Sie die Größe der Spalten und Zeilen innerhalb eines Gitterbehälters, und diese Eigenschaften können eine Liste von platzgetrennten Werten erstellen E.G. Tackgröße, Zeilenname.
Grid-Template-Areas	Es bestimmt, wie Zeilen und Spalten mit den benannten Grid -Elementen angezeigt werden.
Grid-Template	Es handelt.e., Raster-Template-Säulen, Raster-Template-Reihen und Raster-Areas.
Zeilenlücke & Spaltenlücke	Diese Eigenschaften bestimmen die Lücke zwischen den Rasterreihen und den Gittersäulen.
Grid-Säulen-Lücke und Raster-Row-Lücke	Diese Eigenschaften werden verwendet, um die Größe der Lücke zwischen den Gittersäulen bzw. Rasterreihen anzugeben.
Gitterlack	Es handelt sich um eine Abkürzungseigenschaft.e. Grid-Säulen-Lücke und Raster-Row-Lücke
Rechtfertigung	Es richtet die Elemente des Netzes entlang der Zeilen/Inline -Achse aus.
Ausrichtung	Es richtet die Elemente des Netzes entlang der Spalten/Inline -Achse aus.
Ort	Es handelt.
Rechtfertigungsbekämpfung	Es richtet das Netz entlang der Reihen/Inline -Achse aus
Ausrichtung	Es richtet das Netz entlang der Säulen/Blockachse aus
Ort	Es ist ein Kurzeigeneignis für Ausrichtung und Rechtskontrolle, die in der Intensivierung in Verbindung steht.
Raster-Auto-Säulen	Es bestimmt die Standardgröße für die Spalten.
Raster-Auto-Reihen	Es definiert die Standardgröße für die Zeilen.
Gitter-Auto-Flow	Es bestimmt, wie automatische Elemente im CSS-Gitter hinzugefügt werden.
Netz	Es ist eine Kurzeigeneigenschaft für mehrere Gittereigenschaften (i.e. Raster-Template-Reihen, Raster-Template-Säulen, Gitter-Template-Areas, Gitter-Auto-Reihen, Raster-Auto-Säulen und Raster-Auto-Fluss).

So verwenden Sie Grid Containereigenschaften in CSS

Jetzt werden wir einige der oben beschriebenen Eigenschaften praktisch für ein tiefgreifendes Verständnis implementieren.

Die Grid-Template-Säulen & Grid-Template-Reihen-Eigenschaften

Diese Eigenschaften können mehrere platz getrennte Werte wie Auto, Prozentsatz usw. erfolgen.

Lassen Sie uns Beispiel1 ein wenig ändern. Im folgenden Beispiel bleibt der gesamte Code mit Ausnahme der Eigenschaft mit Grid-Template-Säulen gleich.

Beispiel 2

In diesem Beispiel werden wir eine Grid-Template-Säulen-Eigenschaft hinzufügen, um die Größe unserer Auswahl anzugeben:

Grid-Template-Säulen: 1fr Auto Auto;

Aus dem obigen Snippet können wir beobachten, dass die Breite der ersten Spalte ist "1fr", " und die Breite der verbleibenden zwei Spalten ist "Auto".

Daher unterscheidet sich die Breite der ersten Spalte von den verbleibenden zwei Spalten:

Ebenso können wir die verwenden Raster-Template-Reihen Eigenschaft zur Angabe der Zeilengröße.

Das Eigentum ausgerichtet

Um das Gitter entlang der vertikalen/blockischen Achse oder Spalten auszurichten "Center", "Start", "Ende", "Raum-genauso", usw.

Beispiel 3

In diesem Beispiel werden wir die Eigenschaft aus Align-Content verwenden und ihren Wert als „Ende“ festlegen, um die Zeilen am Ende des Containers festzulegen/auszurichten. Das folgende Code-Snippet zeigt den Code für die Containerklasse an, während die Element-Klasse und der HTML-Code wie in früheren Beispielen mithalten bleiben:

.Containerklasse
Anzeige: Grid;
Grid-Template-Säulen: Auto Auto Auto;
Höhe: 300px;
Ausrichtung in der Intentität: Ende;
Hintergrundfarbe: Grün;
Polsterung: 10px;

Die Eigenschaft aus Align-Content wird den folgenden Einfluss haben, wenn ihr Wert als Wert festgelegt wird "Ende":

Die Ausgabe authentifiziert die Arbeit von Ausrichtungsbesitz im Eigentum.

In ähnlicher Weise können wir den Rest der Grid -Container -Eigenschaften implementieren, um je nach Wunsch und Notwendigkeiten die verschiedenen Funktionen in Anspruch zu nehmen.

Abschluss

Ein Gitterbehälter ist ein Box/Container, der Rasterelemente enthält und diese Elemente in die Zeilen und Spalten platzieren kann. Um einen Rastercontainer zu erstellen, müssen wir die Anzeigeeigenschaft verwenden und ihren Wert entweder als Inline-Gitter oder als Gitter festlegen. Darüber hinaus ist in CSS eine breite Palette von Gittereigenschaften erhältlich, um die Webseiten zu entwerfen, z. In dieser Beschreibung wurden verschiedene Aspekte der Grid-Containereigenschaften erläutert und sie praktisch implementiert.