Ein Leitfaden zum CSS-Grid: Beherrschen von Layouts mit Grid-Eigenschaften

Das Positionieren von Elementen auf einer Webseite kann bei der Arbeit mit komplexen Layouts sehr kompliziert sein. Hier kommt das CSS-Raster zum Einsatz. Es handelt sich um ein Layoutsystem, das die Erstellung komplexer Layouts vereinfachen soll.

Wie hilft es Ihnen? Im Gegensatz zu herkömmlichen Layoutmethoden, bei denen Sie Elemente nur in Zeilen oder Spalten positionieren können, bietet Ihnen CSS Grid das Beste aus beiden Welten – einen 2D-Ansatz mit Zeilen und Spalten.

Grid-Container und -Elemente

Sie können CSS-Rastereigenschaften auf zwei Haupttypen von Elementen anwenden: übergeordnete und untergeordnete Elemente. Wenn Sie die Anzeigeeigenschaft für ein übergeordnetes Element auf „grid“ setzen, wird dieses Element in einen Rastercontainer umgewandelt. Jedes untergeordnete Element in diesem Rastercontainer wird zu einem Rasterelement und erbt die angewendeten Rastereigenschaften.

So wird es dargestellt:

Ein Grid-Element kann auch zu einem Grid-Container werden. Sie können das Layout jetzt als verschachteltes Raster bezeichnen – ein Raster innerhalb eines Rasters. Der Hauptgittercontainer wird jetzt als äußeres Gitter bezeichnet, während der Artikel-zu-Gitter-Container zum inneren Gitter wird.

Jedes dieser Gitter funktioniert unabhängig voneinander, was bedeutet, dass die für ein inneres Gitter festgelegten Eigenschaften keinen Einfluss auf das Layout des äußeren Gitters haben und umgekehrt.

So sieht es aus:

Die Beherrschung der Beziehung zwischen Gitterbehältern und Gegenständen ist von entscheidender Bedeutung für Erstellen zweidimensionaler Layouts effektiv.

Beachten Sie, dass es Rastereigenschaften für Rastercontainer und andere für Rasterelemente gibt.

Gitterlinien und Spuren

Bevor Sie mit der Verwendung des CSS-Rasters beginnen, sollten Sie mit zwei Schlüsselbegriffen vertraut sein:

1. Gitterlinien: Rasterlinien beziehen sich auf die horizontalen und vertikalen Linien, die das Raster in einem CSS-Rasterlayout bilden. Sie geben die Start- und Endpunkte von Zeilen und Spalten an und helfen dabei, die Platzierung der Dinge im Raster zu organisieren. Diese Linien sind wie die Kanten von Kisten; Sie verfügen über Nummern, die Ihnen bei der Positionierung helfen, die Elemente zu referenzieren. Hier stellt sie die rote gestrichelte Linie dar:
2. Gitterschienen: Dies sind die Lücken zwischen den Rasterlinien, die Zeilen und Spalten definieren. Sie sind wie die Bausteine ​​des Rasterlayouts. Im Bild oben stellt der farbige Bereich innerhalb jedes Elements die Rasterspur dar.

Stellen Sie sich Gitterlinien und -spuren als Bausteine ​​eines Rasterlayouts vor, wie die Linien auf einem Blatt Millimeterpapier. Wenn eine horizontale Gitterlinie eine vertikale Gitterlinie schneidet, entsteht eine kastenförmige Zelle. Diese Zellen fungieren als Container, in denen Sie Ihre Rasterelemente platzieren können.

CSS-Grid-Container-Eigenschaften

Dies sind Eigenschaften, die Sie auf den Rastercontainer anwenden können, um das Layout zu organisieren und die Positionierung von Elementen darin zu unterstützen. Wie bereits erwähnt, ist eine davon die Anzeigeeigenschaft, die auf „Raster“ eingestellt ist. Hier sind mehr:

Rastervorlage

Diese Eigenschaft definiert die Größe von Zeilen und Spalten. Sie können die Größe dieser Eigenschaften mithilfe von Pixeln, Prozentsätzen oder der Brucheinheit (fr) anpassen. Sie können auch Schlüsselwörter wie verwenden Auto, Minimal Maximal(), Und wiederholen() um die Flexibilität zu erhöhen.

• Rastervorlagenzeilen: Legt die Zeilenhöhe fest.
• Rastervorlagenspalten: Definiert Spaltenbreiten.

Hier sind einige Beispiele:

Verwendung von Pixeln:

.grid-container {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-template-rows: 250px 250px;
}

Prozentsätze verwenden:

.grid-container {
grid-template-columns: 25% 50% 25%;
grid-template-rows: 50% 50%;
}

Mit fr:

.grid-container {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr;
}

Verwendung der Schlüsselwörter auto und minmax():

.grid-container {
grid-template-columns: autominmax(150px, 1fr) auto;
grid-template-rows: 100pxauto;
}

Verwenden von „repeat()“ für eine konsistente Größenanpassung:

.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
}

Automatische Platzierung und Rastervorlagenbereiche

Automatische Platzierung: Die automatische Platzierung ist so, als würde man das Raster entscheiden lassen, wo Gegenstände platziert werden. Wenn Sie keine genauen Positionen angeben, platziert das Raster die Elemente automatisch in der Reihenfolge, in der sie im Markup erscheinen. Dies ist hilfreich, wenn Sie viele Elemente haben und möchten, dass diese das Raster gleichmäßig ausfüllen.

Rastervorlagenbereiche: Stellen Sie sich Rastervorlagenbereiche als die Erstellung eines Layouts mit benannten Zonen vor. Es ist wie die Benennung von Räumen auf einem Grundriss. Sie können sich beim Positionieren von Rasterelementen auf diese Bereichsnamen beziehen. Zum Beispiel:

.grid-container {
grid-template-areas:'headerheaderheaderheader'
 'sidebarmainmainright'
 'sidebarcontentcontentright'
 'footerfooterfooterfooter';
}

Dieses Layout ähnelt einem Raster mit drei Spalten und vier Zeilen. Für den Hauptinhaltsbereich gibt es zwei Zeilen. Zu den beschrifteten Bereichen gehören „Kopfzeile“, „Seitenleiste“, „Inhalt“ und „Fußzeile“. In den nächsten Abschnitten erfahren Sie, wie Sie diese Bereichsbeschriftungen in den Eigenschaften jedes Rasterelements verwenden.

Ausrichtung im CSS-Raster

Sie können Ausrichtungseigenschaften verwenden, um die Positionierung von Rasterelementen innerhalb ihrer Rasterzellen zu steuern. Die Eigenschaften sind:

• rechtfertigen-Elemente: Steuert die horizontale Ausrichtung von Elementen innerhalb ihrer Rasterzelle.
  • Werte: Start, Ende, Mitte und Dehnung.
• align-items: Steuert die vertikale Ausrichtung von Elementen innerhalb ihrer Rasterzelle.
  • Werte: Start, Ende, Mitte und Dehnung.
• Rechtfertigungsinhalt: Richtet das gesamte Raster innerhalb des Containers entlang der horizontalen Achse aus.
  • Werte: start, end, center, stretch, space-between, space-around und space-evenly.
• Inhalt ausrichten: Richtet das gesamte Raster innerhalb des Containers entlang der vertikalen Achse aus.
  • Werte: start, end, center, stretch, space-between, space-around und space-evenly.

Hier ist ein Beispiel:

.grid-container {
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
justify-content: space-between;
align-content: center;
}

In diesem Beispiel werden Elemente sowohl horizontal als auch vertikal innerhalb ihrer Zellen zentriert. Der Platz wird gleichmäßig auf die Spalten des gesamten Rasters verteilt und das Raster wird vertikal im Container zentriert.

Gitterlücke

Der Rasterabstand bezieht sich auf den Abstand zwischen Zeilen und Spalten in einem Rasterlayout. Es trägt dazu bei, eine visuelle Trennung zu schaffen und etwas Platz zwischen den Rasterelementen zu schaffen.

Der Gitterlücke Mit der Eigenschaft können Sie den Abstand zwischen Zeilen und Spalten festlegen. Sie können zur Definition verschiedene Einheiten verwenden, z. B. Pixel (px), Prozentsätze (%), Em-Einheiten (em) und mehr.

.grid-container {
grid-gap: 20px;
}

In diesem Beispiel verfügt der Rastercontainer über zwei Spalten mit einem Abstand von 20 Pixeln dazwischen. Dieser Abstand trennt die Spalten optisch und wertet das Layout auf.

Eigenschaften von CSS-Rasterelementen

Hier sind einige wichtige Eigenschaften, die das Verhalten einzelner Rasterelemente innerhalb eines CSS-Rasterlayouts steuern, sowie Beispiele:

Rasterzeilenanfang und Rasterzeilenende:

• Definiert die Anfangs- und Endzeilenzeilen für ein Element.
• Werte können Zeilennummern, „span n“ oder „auto“ sein.

.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}

Dieser Code platziert Rasterelement 1 von der Linie der zweiten Reihe bis zur Linie der vierten Reihe.

Rasterspaltenanfang und Rasterspaltenende:

• Definiert die Anfangs- und Endspaltenzeilen für ein Element.
• Werte können Zeilennummern, „span n“ oder „auto“ sein.

.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}

Dieser Code platziert Rasterelement 2 von der ersten Spaltenzeile bis zur dritten Spaltenzeile.

Gitterfläche:

• Gibt die Größe und Position eines Rasterelements innerhalb des Rasters durch Referenzierung der benannten Rasterlinien in an Rastervorlagenbereiche.
• Wie bereits erwähnt, werden mit dem bereits vordefinierte Bereichsnamen verwendet Rastervorlagenbereiche Eigentum. Hier ist ein Beispiel für die Verwendung zusammen mit Gitterfläche.

.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.content {
grid-area: content;
}
.right {
grid-area: right;
}
.footer {
grid-area: footer;
}

Hier ist das Ergebnis:

sich rechtfertigen:

• Richtet einzelne Elemente horizontal innerhalb seiner Zelle aus.
• Mögliche Werte sind „Start“, „Ende“, „Mitte“ und „Streckung“.

.grid-item-5 {
justify-self: center;
}

Dieser Code zentriert das horizontal Rasterelement 5 innerhalb seiner Zelle.

align-self:

• Richten Sie einzelne Elemente innerhalb der Zelle vertikal aus.
• Mögliche Werte sind „Start“, „Ende“, „Mitte“ und „Streckung“.

.grid-item-1 {
align-self: end;
}

Dieser Code stimmt überein Rasterelement 1 bis zum Ende seiner Zelle.

Fühlen Sie sich frei, diese Eigenschaften zu kombinieren und anzupassen, um das gewünschte Layout und Aussehen für jedes Rasterelement in Ihrem CSS-Raster zu erstellen.

Responsive Layouts mithilfe von CSS-Rastern erstellen

Verwenden von CSS-Rastern für Erstellen responsiver Layouts ist wichtig, um sicherzustellen, dass sich Ihre Webseite nahtlos an verschiedene Bildschirmgrößen und Geräte anpasst. Sie können diese Methoden anwenden:

• Medien-Anfragen: Sie können Medienabfragen verwenden um je nach Bildschirmgröße unterschiedliche Rasterlayouts anzuwenden. Beispielsweise müssen Sie möglicherweise Rasterelemente neu anordnen oder die Spaltenbreite für kleinere Bildschirme anpassen.
• Flexible Einheiten: Verwenden Sie relative Einheiten wie Prozentsätze und fr, um eine proportionale Anpassung von Rasterelementen und Spalten an den verfügbaren Platz zu ermöglichen.
• Minimal Maximal(): Verwenden Sie die Minimal Maximal() Funktion zum Angeben eines Größenbereichs für Rasterspalten oder -zeilen. Dadurch wird sichergestellt, dass Elemente auf verschiedenen Bildschirmen nicht zu klein oder zu groß angezeigt werden.

Denken Sie daran, Spalten und andere Elemente wie Lücken zwischen Rasterelementen, Schriftgrößen und Ränder anzupassen. Es gewährleistet ein konsistentes und gut gestaltetes Layout, das auf verschiedenen Geräten gut funktioniert.

Entdecken Sie die Möglichkeiten des CSS-Rasterlayouts

Wenn Sie die Flexibilität und Leistungsfähigkeit des CSS-Rasters nutzen, können Sie Layouts erstellen, die nicht nur gut aussehen, sondern sich auch nahtlos an die Anforderungen des modernen Webdesigns anpassen. Tauchen Sie also ein in die Welt der Grids, erkunden Sie die Möglichkeiten und verbessern Sie Ihre Webentwicklungsfähigkeiten.

Wenn Sie sich mit Layoutsystemen befassen, möchten Sie möglicherweise andere Layoutmethoden mit CSS-Rastern vergleichen. Sie können dies mit dem CSS-Flexbox-Modul tun. Dies wird Ihnen helfen, Entscheidungen zu treffen, wenn Sie an einem Projekt arbeiten.