Mit dem CSS-Gitterlayoutmodell können wir ein zweidimensionales Layout auf einer Website erstellen und die Elemente des Netzes in Zeilen und Spalten ausrichten. Wenn wir das CSS-Gitter-Layout-Modell mit den vorherigen Layoutmodellen vergleichen, werden wir folglich erkennen. Das CSS -Gitter -Layout -Modell ermöglicht es, die Webseiten zu entwerfen, ohne die Schwimmer, Positionierung, Inblocks usw. zu verwenden.

In diesem Artikel werden wir alle Grundlagen des CSS-Gitterlayoutmodells abdecken und es wird wie folgt organisiert:

• Was ist CSS Grid Layout -Modell?
• Unterschied zwischen CSS -Gittern und CSS Flexbox.
• Was ist ein Gitterbehälter?
• Was sind Gitterartikel?
• Praktische Implementierung des CSS -Gitterlayouts.

Also beginnen wir beginnen!

Was ist CSS Grid Layout -Modell

Es ist ein zweidimensionales gitterbasiertes Layoutmodell mit Zeilen und Spalten. Diese Zeilen und Spalten können Gitterelemente aufnehmen.

Was ist Unterschied zwischen Gitter und Flexbox -Modell

Jetzt müssen Sie sich wundern, dass sich sowohl CSS Flexbox als auch CSS -Gitter Layout -Modelle sind. Was ist also der Unterschied zwischen beiden beiden Layoutmodellen?

Die untergegebene Tabelle hilft Ihnen beim Verständnis der Grundlagen dieses Konzepts:

CSS Grid Layout	CSS Flexbox
Es ist ein zweidimensionales Layoutmodell.	Es ist ein eindimensionales Layoutmodell.
Das Netzlayout kann gleichzeitig auf Zeilen und Spalten funktionieren.	Die Flexbox kann entweder auf Zeilen oder Spalten gleichzeitig funktionieren.
Es hilft, kompliziertere und organisierte Layouts zu schaffen.	Es hilft, reaktionsschnelle Webseiten zu entwerfen und zu erstellen.
Die CSS-Gitter eignen sich am besten für größere Layouts.	Die CSS-Flexbox-Layouts eignen sich am besten für kleinere Layouts.
Layout erster Ansatz.	Inhalt Erster Ansatz.

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. Um einen Rastercontainer zu erstellen, müssen wir die Anzeigeeigenschaft verwenden und ihren Wert entweder als Inline-Gitter oder als Gitter festlegen.

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

Eigenschaften	Beschreibung
Anzeige	bestimmt ein Element als Netz, indem er seinen Wert für Inline-Gitter oder Gitter angibt.
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 ermitteln. E.G. Trackgröße, Zeilenname.
Grid-Template-Areas	Es bestimmt, wie Zeilen und Spalten mit den benannten Grid -Elementen angezeigt werden.
Grid-Template	Es handelt sich um eine Abkürzungseigenschaft.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	Geben Sie die Spaltgröße zwischen verschiedenen Spalten und Zeilen des Netzes an.
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	Shorthand-Eigenschaft für Raster-Template-Reihen, Raster-Auto-Reihen, Raster-Template-Säulen, Raster-Auto-Säulen, Grid-Template-Areas und die Eigenschaften der Gitterauto-Fluss-Eigenschaften.

Praktische Implementierung des CSS -Gitterlayouts

Lassen Sie uns nun ein paar oben beschriebene Eigenschaften praktisch umsetzen:

Beispiel 1

Erstens werden wir die Grid -Eigenschaft implementieren und ihren Wert als festlegen "Netz". Als nächstes werden wir die Eigenschaft für Gitter-Template-Säulen verwenden und den Wert „Auto“ für alle drei Spalten festlegen:

Netzlayoutmodell

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

Wir erhalten die folgende Ausgabe für das obige Code -Snippet:

Beispiel 2

Implementieren wir nun auch die Eigenschaft für Grid-Template-Reihen, um die Größe der Zeile anzugeben:

Grid-Template-Reihen: Auto 150px;

Das obige Ausschnitt zeigt, dass die Größe der ersten Reihe ist "Auto" und die Größe der zweiten Reihe ist "150px". Die resultierende Ausgabe sieht folgendermaßen aus:

Wir können den Raum am unteren Rand der zweiten Reihe beobachten, wodurch die Arbeit der Eigenschaft für Gitter-Template-Reihen bestätigt wird.

Was sind Gitterartikel?

Die im CSS -Gitterbehälter vorhandenen Elemente/Elemente sind als Netzelemente oder Kinderelemente bezeichnet.

Die unten angegebene Tabelle zeigt verschiedene Eigenschaften von Grid -Elementen:

Eigenschaften	Beschreibung
Grid-Säulen-Start & Grid-Row-Start	Diese Eigenschaften bestimmen den Ort der Netzelemente, indem angeben, wo das Element gestartet werden soll.
Grid-Säulen-End & Grid-Row-End	Diese Eigenschaften bestimmen die Position der Netzelemente, indem angeben, wo das Netzelement beendet werden soll.
Gittersäule	Es ist ein Kurzeigeneignis für die Raster-Säulen-Start- und Grid-Säulen-End-Eigenschaften.
Rasterreihe	Es ist ein Kurzeigeneignis für zwei Immobilien I.e. Start- und Raster-Row-End-Ende.
Gitterfläche	Es gibt den Namen des Netzelements an oder kann verwendet werden, um die Funktionen mehrerer Eigenschaften i zu erreichen. I.e. Start-Start-Start, Raster-Row-End und Grid-Säulen-Ende.
Justify-Selbst	Es richtet ein Netzelement in einer Zelle entlang der Zeile/Inline -Achse aus.
selbst ausrichten	Es richtet ein Netzelement in einer Zelle entlang der Säule/Blockachse aus.
Ort selbst	Es ist ein Kurzeigeneignis für zwei Immobilien I.e. selbst ausrichten und selbst ein rechtfertigen.

Beispiel 3

In diesem Beispiel werden wir die Eigenschaft aus Align-Self in der verwenden "Artikelklasse", Der gesamte Code ist also der gleiche wie in den vorherigen Beispielen angegeben, und die einzige Differenz tritt wie unten gezeigt in der Artikelklasse auf:

.Artikelklasse
Hintergrundfarbe: Skyblue;
Grenze: 2px solide Schwarz;
Polsterung: 30px;
Schriftgröße: 30px;
Text-Align: Mitte;
Ausrichtung selbst: Flex-End;

Wir setzen den Wert der Eigenschaft aus Align-Self als Flex-End, wodurch die Zeilen am Ende des Containers ausgerichtet sind:

So können wir alle Raster -Container- oder Rasterelementeigenschaften gemäß unserem Szenario verwenden.

Abschluss

Mit dem CSS-Gitterlayoutmodell können wir ein zweidimensionales Layout auf einer Website erstellen und die Elemente des Netzes in Zeilen und Spalten ausrichten. Das zweidimensionale Verhalten des Netzlayoutmodells ermöglicht es uns, gleichzeitig an Zeilen und Spalten zu arbeiten. Das CSS Grid Layout -Modell kann ein übergeordnetes Element und mehrere untergeordnete Elemente haben. Das übergeordnete Element wird als Gitterbehälter bezeichnet und das untergeordnete Element wird als Gitterelement bezeichnet. Zahlreiche Eigenschaften können verwendet werden, um mit Grid-Layout-Modellen wie Display, Raster, Ort selbst, REGIFY-Elementen usw. zu arbeiten