Rasterbehälter in CSS | Erklärt

Ein CSS -Netz wird als Layoutmodell angesehen, das eine Webseite in verschiedene Zeilen und Spalten partitioniert, um Elemente zu ordnen. Diese Zeilen und Spalten helfen dabei, Elemente leicht auszurichten, anstatt Positions- und Schwimmereigenschaften zu verwenden. Ein Grid positioniert Elemente in Bezug auf die Webseite oder andere Elemente auf der Webseite. Es besteht aus verschiedenen Komponenten wie Rasterbehälter und Rasterartikeln. Wir werden jedoch in diesem Beitrag einen Rasterbehälter diskutieren.

Was ist ein Gitterbehälter

Ein Gitterbehälter ist ein übergeordnetes Element, das die in Zeilen platzierten Rasterelemente und Spalten enthält. Setzen Sie seine Anzeigeeigenschaft entweder auf Raster oder Inline-Grid.

Sie können einen Rasterbehälter auf eine bestimmte Weise verhalten, indem Sie die damit verbundenen CSS -Eigenschaften verwenden. Diese Eigenschaften werden nachstehend erläutert.

Gitterbehältereigenschaften

Die Eigenschaften, die mit einem Gittercontainer verknüpft sind.

Grid-Template-Säulen-Eigenschaft

Ein Rasterbehälter wird in mehrere Spalten mit bestimmten Größen unterteilt, um die Anzahl der Spalten und deren Breite zu sagen, die Eigenschaft für Gitter-Template-Säulen wird 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: Dieser Wert legt den angegebenen Wert als Breite der Spalten fest.

Beispiel
Nehmen wir an, Sie möchten jeweils vier Spalten mit einer bestimmten Länge erstellen, und folgen Sie dann dem folgenden Code.

Html

1
2
3
4
5
6
7
8

Für den Zweck der Erstellung eines Gittersystems haben wir ein DIV -Element mit der Klasse „Containerelemente“ erstellt, die als Gitterbehälter fungieren.

CSS

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

Hier haben wir vier Spalten erstellt, die jeweils die in dem obigen Code angegebene Breite haben und jeweils eine Lücke von 5px haben. In der Zwischenzeit wurde dem DIV eine sandige braune Farbe und eine Polsterung von 10px zugewiesen.

CSS

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

Wir stylen jetzt einfach unsere Netzelemente mit CSS -Eigenschaften.

Ausgang

Die Eigenschaft funktioniert ordnungsgemäß.

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: Dieser Wert legt den angegebenen Wert als Höhe der Zeilen fest.

Beispiel
Hier werden wir demonstrieren, wie man Zeilen mit einer bestimmten Höhe erstellt.

Html

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

Hier erstellen wir zwei Zeilen mit jeweils die im obige Code angegebene Höhe. Wir haben auch vier Spalten erstellt, die jeweils eine automatische Breite haben.

Ausgang

Zeilen wurden erfolgreich erzeugt.

Begründung von Rechtfertigungen

Zum Zweck der Ausrichtung des gesamten Netzes in einem horizontalen Container wird die Anwaltschaftseigenschaft verwendet. Denken Sie daran, dass die Gesamtbreite des Netzes geringer sein sollte als die des Behälters, damit diese Eigenschaft die Gesamtbreite des Netzes betragen sollte.

Syntax

Justify-Incontent: Start | Ende | Mitte | Weltraum zwischen | Raumfahrt | Weltraum-gleiche | Dehnung | initial | erben;

Parameter erklärt
Start: Es positioniert das Raster zu Beginn des Containers und ist der Standardwert.

Ende: Dadurch stellt das Netz am letzten des Behälters.

Center: Dies positioniert das Netz in der Mitte des Behälters.

Weltraum dazwischen: Es fügt eine gleiche Menge an Platz zwischen den Spalten hinzu.

Raumfahrt: Es fügt einen gleichen Raum um Spalten hinzu.

Weltraum: Dies fügt einen gleichen Raum um und zwischen Spalten um.

strecken: Es verändert die Größe der Elemente, sodass das Netz die volle Breite des Behälters abdeckt kann.

Beispiel
Angenommen, Sie möchten Platz zwischen den Spalten in einem Rasterbehälter hinzufügen.

CSS

.Container
Anzeige: Grid;
Rechtfertigungsbekämpfung: Weltraum zwischen;
Grid-Template-Säulen: 40px 40px 40px;
Raster-Lack: 5px;
Hintergrundfarbe: Sandybrown;
Polsterung: 10px;

Im obigen Code, um das Netz kleiner als der Container zu machen.

Ausgang

Zwischen den Spalten wurde Platz hinzugefügt.

Eigenschaft ausgerichtet

Um das gesamte Netz innerhalb eines Containers vertikal auszurichten, wird die Eigenschaft aus Align-Content verwendet. Denken Sie daran, dass die Gesamthöhe des Netzes geringer sein sollte als die des Behälters, damit diese Eigenschaft die Gesamthöhe des Netzes betragen sollte.

Syntax

Ausrichtung in Kontent: Start | Ende | Mitte | Weltraum zwischen | Raumfahrt | Weltraum-gleiche | Dehnung | initial | erben;

Parameter erklärt
Start: Es positioniert die Zeilen zu Beginn des Containers und ist der Standardwert.

Ende: Dies positioniert die Zeilen am Ende des Behälters.

Center: Dies positioniert das Netz in der Mitte des Behälters.

Weltraum dazwischen: Es fügt eine gleiche Menge an Platz zwischen Zeilen hinzu.

Raumfahrt: Es fügt einen gleichen Raum um Reihen hinzu.

Weltraum: Dies ergibt einen gleichen Raum um und zwischen Reihen.

strecken: Es verändert die Größe der Elemente, sodass das Raster die volle Höhe des Behälters bedecken kann.

Beispiel
Angenommen, Sie möchten Platz zwischen Zeilen in einem Container hinzufügen.

CSS

.Container
Anzeige: Grid;
Höhe: 350px;
Ausrichtung in der Intentität: Raumweiter;
Grid-Template-Säulen: Auto Auto Auto;
Raster-Lack: 5px;
Hintergrundfarbe: Sandybrown;
Polsterung: 10px;

Um Platz zwischen Zeilen hinzuzufügen, bieten wir zunächst eine gewisse Höhe für das Netz und nutzen dann den Platz zwischen dem Platz zwischen den Zeilen der Ausrichtung der Ausrichtung in die Eigenschaft, die Platz hinzufügen. Darüber hinaus haben wir jeweils drei Spalten mit einer automatischen Breite erstellt.

Ausgang

Zwischen den Zeilen wurde Platz hinzugefügt.

Abschluss

Ein Gitterbehälter ist ein übergeordnetes Element, das die in Zeilen platzierten Rasterelemente und Spalten enthält. Um ein Element das Verhalten eines Gitterbehälters zu übernehmen. Ein Rasterbehälter kann bestimmte Eigenschaften durch die Verwendung bestimmter CSS-Eigenschaften wie RECHTIFT-CONTENT, GRID-TEMplate-Säulen, Ausrichtungsbekämpfung und Raster-Template-Reihen durch die Verwendung bestimmter CSS-Eigenschaften erzielen. Jede dieser Eigenschaften wurde im Artikel zusammen mit relevanten Beispielen erläutert.