Kostenlose Tutorials für Anfänger

Appearance

Kapitel 7: Ausrichtung von Grid-Elementen ​

🎯 Lernziele ​

In diesem Kapitel lernen Sie:

  • ✅ justify-items und align-items verwenden
  • ✅ justify-content und align-content verstehen
  • ✅ Unterschied zwischen Container- und Element-Ausrichtung
  • ✅ Häufige Fehler bei der Ausrichtung vermeiden

7.1 Ausrichtung innerhalb von Grid-Zellen ​

📖 Grundlegende Konzepte ​

Grid hat zwei Ausrichtungsebenen:

  1. Innerhalb von Grid-Zellen: Wie sind Elemente innerhalb ihrer Zelle ausgerichtet?
  2. Gesamtes Grid: Wie ist das Grid innerhalb des Containers ausgerichtet?

7.2 justify-items: Horizontale Ausrichtung (Inline-Achse) ​

📖 Definition ​

justify-items steuert die horizontale Ausrichtung aller Grid-Elemente innerhalb ihrer Zellen.

🎨 Visuelle Erklärung ​

Standard (stretch):

┌─────────────────────────────────┐
│ [Element füllt Zelle horizontal] │
└─────────────────────────────────┘

center:

┌─────────────────────────────────┐
│      [Element]                 │
└─────────────────────────────────┘

start:

┌─────────────────────────────────┐
│ [Element]                       │
└─────────────────────────────────┘

end:

┌─────────────────────────────────┐
│                       [Element] │
└─────────────────────────────────┘

💻 Syntax ​

css
.container {
  justify-items: stretch | start | end | center;
}

💻 Beispiel ​

HTML:

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

CSS:

css
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  justify-items: center;  /* Alle Elemente horizontal zentrieren */
  padding: 20px;
  background-color: #f0f0f0;
}

.item {
  background-color: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
  width: 80%;  /* Nicht volle Breite, damit Ausrichtung sichtbar */
}

🔑 Wichtige Punkte ​

  1. ✅ justify-items wirkt auf alle Grid-Elemente
  2. ✅ Kann durch justify-self am einzelnen Element überschrieben werden
  3. ✅ Standardwert: stretch (Element füllt Zelle)

7.3 align-items: Vertikale Ausrichtung (Block-Achse) ​

📖 Definition ​

align-items steuert die vertikale Ausrichtung aller Grid-Elemente innerhalb ihrer Zellen.

🎨 Visuelle Erklärung ​

Standard (stretch):

┌──────────┐
│          │
│ Element  │  (füllt Zelle vertikal)
│          │
└──────────┘

center:

┌──────────┐
│          │
│ Element  │  (zentriert)
│          │
└──────────┘

start:

┌──────────┐
│ Element  │
│          │
│          │
└──────────┘

end:

┌──────────┐
│          │
│          │
│ Element  │
└──────────┘

💻 Syntax ​

css
.container {
  align-items: stretch | start | end | center | baseline;
}

💻 Beispiel ​

CSS:

css
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 200px 200px;  /* Feste Zeilenhöhe */
  gap: 20px;
  align-items: center;  /* Alle Elemente vertikal zentrieren */
  padding: 20px;
  background-color: #f0f0f0;
}

.item {
  background-color: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
  height: auto;  /* Nicht volle Höhe */
}

🔑 baseline (Erwähnenswert) ​

css
.container {
  align-items: baseline;  /* Elemente an Text-Baseline ausrichten */
}

Verwendung: Wenn Elemente unterschiedliche Schriftgrößen haben.

7.4 justify-content: Horizontale Ausrichtung des Grids ​

📖 Definition ​

justify-content steuert die Ausrichtung des gesamten Grids innerhalb des Containers auf der horizontalen Achse.

Wichtig: Nur wirksam, wenn das Grid schmaler ist als der Container!

🎨 Visuelle Erklärung ​

Container (breit):

┌─────────────────────────────────┐
│                                 │
│                                 │
└─────────────────────────────────┘

Grid (schmaler):

┌─────────────────────────────────┐
│  [Grid]                         │  (start)
└─────────────────────────────────┘

💻 Syntax ​

css
.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

💻 Beispiel ​

CSS:

css
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;  /* Grid ist nur 300px breit */
  gap: 20px;
  justify-content: center;  /* Grid horizontal zentrieren */
  width: 800px;  /* Container ist 800px breit */
  padding: 20px;
  background-color: #f0f0f0;
}

.item {
  background-color: #3498db;
  color: white;
  padding: 40px;
  text-align: center;
}

🔑 Verschiedene Werte im Vergleich ​

WertVerhalten
startGrid am Anfang (links)
endGrid am Ende (rechts)
centerGrid in der Mitte
space-aroundGleichmäßige Abstände um Grid
space-betweenGrid am Anfang und Ende, Rest gleichmäßig
space-evenlyAlle Abstände gleich (auch zu den Rändern)

7.5 align-content: Vertikale Ausrichtung des Grids ​

📖 Definition ​

align-content steuert die Ausrichtung des gesamten Grids innerhalb des Containers auf der vertikalen Achse.

Wichtig: Nur wirksam, wenn das Grid niedriger ist als der Container!

💻 Syntax ​

css
.container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

💻 Beispiel ​

CSS:

css
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;  /* Grid ist nur 200px hoch */
  gap: 20px;
  align-content: center;  /* Grid vertikal zentrieren */
  height: 500px;  /* Container ist 500px hoch */
  padding: 20px;
  background-color: #f0f0f0;
}

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

7.6 place-items: Kurzschreibweise ​

📖 Definition ​

place-items ist die Kurzschreibweise für align-items und justify-items.

💻 Syntax ​

css
.container {
  place-items: <align-items> <justify-items>;
  /* Wenn nur ein Wert: gilt für beide */
}

💻 Beispiel ​

Lang:

css
.container {
  align-items: center;
  justify-items: center;
}

Kurz:

css
.container {
  place-items: center;  /* Zentriert horizontal und vertikal */
}

🎯 Perfektes Zentrieren ​

css
.container {
  display: grid;
  place-items: center;  /* Horizontal und vertikal zentrieren */
  min-height: 100vh;  /* Volle Höhe */
}

7.7 place-content: Kurzschreibweise ​

📖 Definition ​

place-content ist die Kurzschreibweise für align-content und justify-content.

💻 Syntax ​

css
.container {
  place-content: <align-content> <justify-content>;
}

💻 Beispiel ​

Lang:

css
.container {
  align-content: center;
  justify-content: center;
}

Kurz:

css
.container {
  place-content: center;  /* Grid in der Mitte (horizontal + vertikal) */
}

7.8 Praktische Übung: Ausrichtungen kombinieren ​

🎯 Übungsziel ​

Erstellen Sie ein Layout mit verschiedenen Ausrichtungen.

📝 Schritt 1: HTML erstellen ​

html
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Grid Ausrichtung Übung</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
</body>
</html>

📝 Schritt 2: CSS erstellen ​

css
/* style.css */

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

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

.container {
  display: grid;
  grid-template-columns: 150px 150px;  /* Grid ist 300px + gap breit */
  grid-template-rows: 150px 150px;    /* Grid ist 300px + gap hoch */
  gap: 20px;
  
  /* Ausrichtung des Grids im Container */
  justify-content: center;  /* Horizontal zentrieren */
  align-content: center;     /* Vertikal zentrieren */
  
  /* Ausrichtung der Elemente in Zellen */
  justify-items: center;     /* Horizontal in Zelle zentrieren */
  align-items: center;       /* Vertikal in Zelle zentrieren */
  
  /* Container-Eigenschaften */
  width: 800px;
  height: 600px;
  margin: 0 auto;
  background-color: #f0f0f0;
  padding: 20px;
}

.item {
  background-color: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
  width: 80%;  /* Nicht volle Breite */
  height: 80%; /* Nicht volle Höhe */
  border-radius: 8px;
}

🔍 Schritt 3: Ergebnis beobachten ​

Was passiert ist:

  1. ✅ Container: 800px breit, 600px hoch
  2. ✅ Grid: 320px breit (300px + 20px gap), 320px hoch
  3. ✅ Grid-Ausrichtung: Zentriert im Container (justify-content: center, align-content: center)
  4. ✅ Element-Ausrichtung: Zentriert in Zellen (justify-items: center, align-items: center)

7.9 Häufige Fehler bei der Ausrichtung ​

❌ Fehler 1: justify-content wird nicht wirksam ​

Grund: Grid ist so breit wie Container.

Falsch:

css
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* Grid füllt Container */
  justify-content: center;  /* WIRKT NICHT! */
}

Richtig:

css
.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;  /* Grid ist schmaler als Container */
  justify-content: center;  /* JETZT WIRKT ES! */
  width: 800px;  /* Container breiter als Grid */
}

❌ Fehler 2: align-items und align-content verwechseln ​

Unterschied:

  • align-items: Ausrichtung innerhalb von Zellen
  • align-content: Ausrichtung des gesamten Grids im Container

Falsch:

css
.container {
  align-content: center;  /* Falsch gemeint für Zellen-Ausrichtung */
}

Richtig:

css
.container {
  align-items: center;  /* Richtig für Zellen-Ausrichtung */
}

❌ Fehler 3: justify-self wird ignoriert ​

Grund: justify-items ist am Container gesetzt.

CSS:

css
.container {
  justify-items: center;  /* Alle Elemente zentriert */
}

.item:first-child {
  justify-self: start;  /* Überschreibt für erstes Element */
}

📝 Zusammenfassung ​

In diesem Kapitel haben Sie gelernt:

✅ Ausrichtung innerhalb von Zellen:

  • justify-items: Horizontal
  • align-items: Vertikal
  • place-items: Kurzschreibweise

✅ Ausrichtung des Grids im Container:

  • justify-content: Horizontal
  • align-content: Vertikal
  • place-content: Kurzschreibweise

✅ Unterschiede verstehen:

  • justify-items vs. justify-content
  • align-items vs. align-content

✅ Praktische Übung:

  • Verschiedene Ausrichtungen kombiniert
  • Perfektes Zentrieren erreicht

✅ Häufige Fehler:

  • justify-content wirkt nicht (Grid zu breit)
  • align-items und align-content verwechselt
  • justify-self wird ignoriert

🎯 Nächste Schritte ​

Im nächsten Kapitel lernen Sie:

  • 📖 grid-template-areas verwenden
  • 🎯 Grid-Bereiche benennen und platzieren
  • 🛠️ Komplexe Layouts mit Areas erstellen

👉 Weiter zu Kapitel 8: Grid-Bereiche

💡 Tipps für Ausrichtung ​

  1. Merken Sie sich: items = innerhalb von Zellen, content = gesamtes Grid
  2. place-items: center: Perfekt für absolutes Zentrieren
  3. DevTools nutzen: Ausrichtungen visualisieren
  4. Testen Sie verschiedene Werte: Experimentieren Sie mit start, end, center
  5. Achtung bei fr Einheiten: justify-content wirkt nicht, wenn Grid den Container füllt

Viel Erfolg beim Grid-Lernen! 🚀

Frei für alle Anfänger

Copyright © 2026 Programmier-Tutorials