Kostenlose Tutorials für Anfänger

Appearance

Kapitel 14: Grid-Layout ​

Willkommen bei Grid-Layout! Dies ist das mächtigste Layout-Modell in CSS. Während Flexbox eindimensional ist (entweder horizontal oder vertikal), ist Grid zweidimensional (sowohl Zeilen als auch Spalten)!

14.1 Definition von Grid-Layout: Zweidimensionales Raster ​

Grid-Layout ermöglicht es Ihnen, Elemente in einem Raster aus Zeilen und Spalten anzuordnen.

📦 Analogie: Ein Arena-Platz ​

Stellen Sie sich eine Grid wie einen Arena-Platz vor:

  • Der Platz ist in Zeilen (Reihen) und Splaten (Spalten) unterteilt
  • Jedes Element (Besucher) kann eine genaue Position zugewiesen bekommen
  • Sie können steuern, wie viele Zeilen und Spalten ein Element einnimmt

🎯 Flexbox vs. Grid ​

FeatureFlexboxGrid
DimensionEindimensional (entweder Zeile oder Spalte)Zweidimensional (Zeilen + Spalten gleichzeitig)
AnwendungsfallNavigation, kleine LayoutsSeitenlayout, komplexe Layouts
HauptachseHat eine Hauptachse (horizontal oder vertikal)Hat kein Hauptachsen-Konzept
KomplexitätEinfacherKomplexer, aber mächtiger

14.2 Grid-Layout aktivieren: display: grid; ​

Um Grid zu aktivieren, müssen Sie dem Container display: grid; zuweisen.

📝 Syntax ​

css
.container {
    display: grid; /* Grid-Container aktivieren! */
}

🎯 Beispiel ​

HTML:

html
<div class="container">
    <div class="item">Element 1</div>
    <div class="item">Element 2</div>
    <div class="item">Element 3</div>
    <div class="item">Element 4</div>
</div>

CSS:

css
.container {
    display: grid;
    background-color: #f0f0f0;
    padding: 20px;
}

.item {
    background-color: #3366cc;
    color: white;
    padding: 20px;
    text-align: center;
}

Ergebnis: Die Elemente werden untereinander angeordnet (wie bei Block-Elementen), weil wir noch keine Spalten definiert haben!

14.3 Kern-Eigenschaften ​

Lassen Sie uns die wichtigsten Eigenschaften für Grid-Container und Grid-Items lernen!

1. grid-template-columns: Spalten definieren ​

Legt fest, wie viele Spalten es gibt und wie breit sie sind.

Syntax:

css
.container {
    grid-template-columns: breite1 breite2 breite3 ...;
}

Beispiele:

css
/* 3 Spalten, jeweils 200px breit */
.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}

/* 3 Spalten: 1. Spalte 100px, 2. Spalte 200px, 3. Spalte 100px */
.container {
    display: grid;
    grid-template-columns: 100px 200px 100px;
}

/* 3 Spalten mit relativen Einheiten (empfohlen!) */
.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* 1:2:1 Verhältnis */
}

/* 3 Spalten mit `repeat()` (Abkürzung) */
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Spalten, gleiche Breite */
}

💡 Erklärung von fr (Fraction):

  • fr steht für "Fraction" (Anteil)
  • 1fr = 1 Anteil des verfügbaren Platzes
  • 2fr = 2 Anteile des verfügbaren Platzes

2. grid-template-rows: Zeilen definieren ​

Legt fest, wie viele Zeilen es gibt und wie hoch sie sind.

Syntax:

css
.container {
    grid-template-rows: höhe1 höhe2 höhe3 ...;
}

Beispiele:

css
/* 3 Zeilen, jeweils 100px hoch */
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Spalten */
    grid-template-rows: 100px 100px 100px;    /* 3 Zeilen */
}

/* 3 Zeilen mit `repeat()` */
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);
}

/* Automatische Höhe (basierend auf Inhalt) */
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto; /* Höhe passt sich dem Inhalt an */
}

3. grid-gap: Abstand zwischen Grid-Items ​

Legt den Abstand zwischen Grid-Items fest (ersetzt gap in Flexbox).

Syntax:

css
.container {
    grid-gap: abstand; /* Gleich für Zeilen und Spalten */
    /* Oder: */
    grid-gap: zeilen-abstand spalten-abstand;
}

Beispiele:

css
/* 20px Abstand zwischen allen Items */
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

/* 10px vertikaler Abstand, 20px horizontaler Abstand */
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px 20px;
}

💡 Moderne Schreibweise:

css
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* Modernere Schreibweise, funktioniert auch bei Flexbox! */
}

4. grid-area: Elemente über mehrere Zeilen/Spalten strecken ​

Legt fest, wie viele Zeilen und Spalten ein Grid-Item einnimmt.

Syntax (Kurzschreibweise):

css
.item {
    grid-area: zeile-start / spalte-start / zeile-ende / spalte-ende;
}

Beispiele:

css
/* Element nimmt 2 Zeilen und 2 Spalten ein */
.item-big {
    grid-area: 1 / 1 / 3 / 3; /* Von Zeile 1, Spalte 1 bis Zeile 3, Spalte 3 */
}

/* Oder mit `grid-row` und `grid-column` (einzeln) */
.item-big {
    grid-row: 1 / 3;    /* Von Zeile 1 bis Zeile 3 */
    grid-column: 1 / 3; /* Von Spalte 1 bis Spalte 3 */
}

14.4 Anfänger-Tipps: Grid-Layout häufige Szenarien ​

Dies ist ein klassisches Beispiel für Grid-Layout!

HTML (index.html):

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Seitenlayout</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="page-layout">
        <header class="header">Header</header>
        <aside class="sidebar">Sidebar</aside>
        <main class="main">Hauptinhalt</main>
        <footer class="footer">Footer</footer>
    </div>
</body>
</html>

CSS (style.css):

css
/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

/* Page Layout (Grid-Container) */
.page-layout {
    display: grid;
    grid-template-columns: 200px 1fr; /* 2 Spalten: Sidebar 200px, Main restlicher Platz */
    grid-template-rows: auto 1fr auto;    /* 3 Zeilen: Header auto, Main 1fr, Footer auto */
    grid-gap: 10px;
    min-height: 100vh; /* Volle Bildschirmhöhe */
}

/* Bereiche positionieren */
.header {
    grid-column: 1 / 3; /* Header nimmt alle Spalten ein (von 1 bis 3) */
    background-color: #333333;
    color: white;
    padding: 20px;
    text-align: center;
}

.sidebar {
    background-color: #f0f0f0;
    padding: 20px;
}

.main {
    background-color: #ffffff;
    padding: 20px;
}

.footer {
    grid-column: 1 / 3; /* Footer nimmt alle Spalten ein (von 1 bis 3) */
    background-color: #333333;
    color: white;
    padding: 20px;
    text-align: center;
}

/* Responsive Anpassung für Handys */
@media (max-width: 768px) {
    .page-layout {
        grid-template-columns: 1fr; /* Nur eine Spalte */
        grid-template-rows: auto auto 1fr auto; /* Header, Sidebar, Main, Footer */
    }
    
    .header,
    .footer {
        grid-column: 1 / 2; /* Nur eine Spalte */
    }
}

🌟 Szenario 2: Fotogalerie (Bildergitter) ​

HTML (index.html):

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fotogalerie</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="gallery">
        <img src="https://picsum.photos/300/200" alt="Bild 1">
        <img src="https://picsum.photos/300/200" alt="Bild 2">
        <img src="https://picsum.photos/300/200" alt="Bild 3">
        <img src="https://picsum.photos/300/200" alt="Bild 4">
        <img src="https://picsum.photos/300/200" alt="Bild 5">
        <img src="https://picsum.photos/300/200" alt="Bild 6">
    </div>
</body>
</html>

CSS (style.css):

css
/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    padding: 20px;
}

/* Galerie (Grid-Container) */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Responsive: Automatische Anzahl an Spalten */
    gap: 20px;
}

/* Bilder */
.gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* Bild füllt den Bereich, wird zugeschnitten */
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.gallery img:hover {
    transform: scale(1.05); /* Leicht vergrößern beim Darüberfahren */
}

14.5 Praxis: Seitenlayout, Fotogalerie ​

Lassen Sie uns das Gelernte in einem praktischen Beispiel anwenden!

🎯 Beispiel 1: Vollständiges Seitenlayout ​

HTML (index.html):

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Seitenlayout</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="page-layout">
        <header class="header">
            <h1>Meine Webseite</h1>
            <nav>
                <a href="#">Startseite</a>
                <a href="#">Über uns</a>
                <a href="#">Kontakt</a>
            </nav>
        </header>
        
        <aside class="sidebar">
            <h3>Sidebar</h3>
            <ul>
                <li>Link 1</li>
                <li>Link 2</li>
                <li>Link 3</li>
            </ul>
        </aside>
        
        <main class="main">
            <h2>Willkommen!</h2>
            <p>Dies ist der Hauptinhalt der Seite.</p>
        </main>
        
        <footer class="footer">
            <p>&copy; 2024 Meine Webseite</p>
        </footer>
    </div>
</body>
</html>

CSS (style.css):

css
/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

/* Page Layout (Grid-Container) */
.page-layout {
    display: grid;
    grid-template-columns: 200px 1fr; /* 2 Spalten: Sidebar 200px, Main restlicher Platz */
    grid-template-rows: auto 1fr auto;    /* 3 Zeilen: Header auto, Main 1fr, Footer auto */
    gap: 10px;
    min-height: 100vh;
}

/* Header */
.header {
    grid-column: 1 / 3; /* Header nimmt alle Spalten ein */
    background-color: #333333;
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header nav a {
    color: white;
    text-decoration: none;
    margin-left: 20px;
}

/* Sidebar */
.sidebar {
    background-color: #f0f0f0;
    padding: 20px;
}

.sidebar ul {
    list-style-type: none;
    margin-top: 10px;
}

.sidebar li {
    padding: 5px 0;
}

/* Main */
.main {
    background-color: #ffffff;
    padding: 20px;
}

/* Footer */
.footer {
    grid-column: 1 / 3; /* Footer nimmt alle Spalten ein */
    background-color: #333333;
    color: white;
    padding: 20px;
    text-align: center;
}

/* Responsive Anpassung für Handys */
@media (max-width: 768px) {
    .page-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto 1fr auto;
    }
    
    .header,
    .footer {
        grid-column: 1 / 2;
    }
    
    .header {
        flex-direction: column;
        text-align: center;
    }
    
    .header nav {
        margin-top: 10px;
    }
    
    .header nav a {
        margin: 0 10px;
    }
}

🎯 Beispiel 2: Fotogalerie mit Hover-Effekten ​

HTML (index.html):

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fotogalerie</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Meine Fotogalerie</h1>
    
    <div class="gallery">
        <img src="https://picsum.photos/300/200?random=1" alt="Bild 1">
        <img src="https://picsum.photos/300/200?random=2" alt="Bild 2">
        <img src="https://picsum.photos/300/200?random=3" alt="Bild 3">
        <img src="https://picsum.photos/300/200?random=4" alt="Bild 4">
        <img src="https://picsum.photos/300/200?random=5" alt="Bild 5">
        <img src="https://picsum.photos/300/200?random=6" alt="Bild 6">
    </div>
</body>
</html>

CSS (style.css):

css
/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    padding: 20px;
    text-align: center;
}

h1 {
    margin-bottom: 30px;
    color: #333333;
}

/* Galerie (Grid-Container) */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Responsive */
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Bilder */
.gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.gallery img:hover {
    transform: scale(1.05); /* Leicht vergrößern */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Tiefer Schatten */
}

📝 Zusammenfassung ​

In diesem Kapitel haben Sie gelernt:

  • ✅ Was Grid-Layout ist (zweidimensionales Raster)
  • ✅ Wie man Grid aktiviert (display: grid;)
  • ✅ Kern-Eigenschaften (grid-template-columns, grid-template-rows, grid-gap, grid-area)
  • ✅ Häufige Grid-Szenarien (Seitenlayout, Fotogalerie)
  • ✅ Praktische Beispiele: Seitenlayout, Fotogalerie

🎯 Nächste Schritte ​

Im nächsten Kapitel werden wir:

  1. Ausrichtung & Abstände erlernen (horizontal/vertikal zentrieren)
  2. Verschuiedene Methoden zur Zentrierung üben
  3. Praktische Projekte zur Elementausrichtung erstellen

Bereit für mehr? Los geht's! 🎨

Frei für alle Anfänger

Copyright © 2026 Programmier-Tutorials