CSS - Grid Layout: Ein Anfängerleitfaden

Hallo da draußen, zukünftiger Webdesign-Superstar! Heute begeben wir uns auf eine aufregende Reise in die Welt des CSS Grid Layouts. Mach dir keine Sorgen, wenn du noch nie eine Zeile Code geschrieben hast – ich werde dein freundlicher Guide sein und wir gehen das Schritt für Schritt durch. Am Ende dieses Tutorials wirst du schicke, responsive Layouts wie ein Profi erstellen können!

Was ist ein Grid Layout?

Stelle dir vor, du räumst Möbel in einem Raum an. Du könntest mental den Raum in Reihen und Spalten unterteilen, um alles ordentlich zu organisieren. Das ist im Grunde genommen, was das CSS Grid Layout für Webseiten macht!

Das CSS Grid Layout ist ein leistungsstarkes Werkzeug, das es uns ermöglicht, zweidimensionale Layouts auf Webseiten zu erstellen. Es ist, als hättest du eine unsichtbare Gitterstruktur auf deiner Webseite, auf der du den Inhalt genau dort platzieren kannst, wo du ihn haben möchtest. Cool, oder?

Grid Elemente

Bevor wir tiefer einsteigen, lassen wir uns mit einigen wichtigen Begriffen vertraut machen:

1. Grid Container: Dies ist das übergeordnete Element, das alle Grid-Elemente hält.
2. Grid-Elemente: Diese sind die Kinder des Grid-Containers.
3. Grid-Linien: Die trennenden Linien, die die Struktur des Grids bilden.
4. Grid-Tracks: Die Räume zwischen den Grid-Linien (Reihen oder Spalten).
5. Grid-Zelle: Die Schnittstelle einer Reihe und einer Spalte.
6. Grid-Bereich: Ein rechteckiger Raum, umgeben von vier Grid-Linien.

Mach dir keine Sorgen, wenn diese jetzt verwirrend klingen. Wir werden sie gleich in Aktion sehen!

Display Grid Eigenschaft

Lassen wir mit einem einfachen Beispiel beginnen. Angenommen, wir möchten ein einfaches 3x3 Grid erstellen. So machen wir das:

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>

.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}

.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}

Lassen wir das auseinanderbrechen:

1. Wir setzen display: grid; auf den Container, um das Grid Layout zu aktivieren.
2. grid-template-columns: auto auto auto; erstellt drei Spalten mit gleichem Breite.
3. Wir gestalten die Grid-Elemente für bessere Sichtbarkeit.

Voilà! Du hast gerade dein erstes Grid-Layout erstellt. Wie aufregend!

Grid-Reihen und -Spalten

Nun werden wir spezifischer mit unseren Reihen und Spalten. Wir können genaue Größen definieren:

.grid-container {
display: grid;
grid-template-columns: 100px 200px 100px;
grid-template-rows: 80px 200px;
}

Dies erstellt ein Grid mit:

• Drei Spalten: 100px, 200px und 100px breit
• Zwei Reihen: 80px und 200px hoch

Du kannst auch verschiedene Einheiten wie Prozente oder die neue fr Einheit (Anteil des verfügbaren Raums) verwenden:

.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
}

Dies erstellt ein ähnliches Layout, aber die Spalten werden fließend basierend auf dem verfügbaren Raum skaliert.

Grid-Abstand

Manchmal möchtest du etwas Platz zwischen deinen Grid-Elementen. Da kommt grid-gap ins Spiel:

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}

Dies fügt einen 10px Abstand zwischen allen Reihen und Spalten hinzu. Du kannst auch separate Abstände für Zeilen und Spalten festlegen:

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-row-gap: 10px;
grid-column-gap: 20px;
}

CSS Grid Linien

Erinnern wir uns an die Grid-Linien, über die wir earlier gesprochen haben? Wir können sie verwenden, um unsere Elemente präzise zu platzieren:

<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>

.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 300px 100px;
gap: 10px;
}

.item1 {
grid-column: 1 / span 4;
}

.item2 {
grid-row: 2 / span 2;
}

.item3 {
grid-column: 2 / span 2;
}

.item4 {
grid-column: 4;
grid-row: 2;
}

.item5 {
grid-column: 2 / span 3;
grid-row: 3;
}

Dies erstellt ein komplexes Layout mit einer Header-Spalte, die die volle Breite einnimmt, einem Seitenmenü, einem Hauptinhaltbereich, einer rechten Seitenleiste und einem Footer. Probiere verschiedene Werte aus, um zu sehen, wie sie das Layout beeinflussen!

CSS Grid Eigenschaften Referenz

Hier ist eine praktische Tabelle einiger häufiger CSS Grid Eigenschaften:

Eigenschaft	Beschreibung
display: grid;	Definiert einen Grid-Container
grid-template-columns	Spezifiziert die Anzahl und Größen der Spalten
grid-template-rows	Spezifiziert die Anzahl und Größen der Reihen
grid-gap	Setzt den Abstand zwischen Grid-Elementen
grid-column-start	Spezifiziert, wo das Grid-Element beginnen soll
grid-column-end	Spezifiziert, wo das Grid-Element enden soll
grid-row-start	Spezifiziert, wo das Grid-Element beginnen soll
grid-row-end	Spezifiziert, wo das Grid-Element enden soll
grid-area	Spezifiziert die Größe und Lage der Grid-Elemente

Und da hast du es! Du hast gerade deine ersten Schritte in die wundervolle Welt des CSS Grid Layouts getan. Denke daran, Übung macht den Meister, also habe keine Angst, verschiedene Layouts und Eigenschaften auszuprobieren. Bereit, zukünftige Grid-Meister, viel Spaß beim Coden!

Credits: Image by storyset