Kapitel 10: Elemente ausrichten und ordnen

🎯 Lernziele

In diesem Kapitel lernen Sie:

✅ align-self und justify-self verwenden
✅ Einzelne Elemente anders ausrichten
✅ order für Reihenfolge verwenden
✅ z-index für Überlappung verstehen

10.1 `align-self`: Vertikale Ausrichtung überschreiben

📖 Definition

align-self überschreibt align-items für ein einzelnes Element.

🎨 Visuelle Erklärung

Container hat align-items: stretch:

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

Element hat align-self: center:

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

💻 Syntax

css

.element {
  align-self: auto | stretch | start | end | center | baseline;
}

💻 Beispiel

HTML:

html

<div class="container">
  <div class="item normal">Normal</div>
  <div class="item special">Spezial</div>
  <div class="item normal">Normal</div>
</div>

CSS:

css

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

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

.special {
  align-self: center;  /* Nur dieses Element zentrieren */
  background-color: #e74c3c;
  height: auto;  /* Nicht volle Höhe */
}

🔑 Wichtige Punkte

✅ align-self überschreibt align-items nur für dieses Element
✅ Standardwert: auto (erbt von align-items)
✅ Nützlich für individuelle Anpassungen

10.2 `justify-self`: Horizontale Ausrichtung überschreiben

📖 Definition

justify-self überschreibt justify-items für ein einzelnes Element.

💻 Syntax

css

.element {
  justify-self: auto | stretch | start | end | center;
}

💻 Beispiel

CSS:

css

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

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

.special {
  justify-self: center;  /* Nur dieses Element zentrieren */
  width: 80%;  /* Nicht volle Breite */
  background-color: #2ecc71;
}

10.3 `order`: Reihenfolge ändern

📖 Definition

order bestimmt die visuelle Reihenfolge von Grid-Elementen. Niedrigere Werte erscheinen zuerst.

🎨 Visuelle Erklärung

HTML-Reihenfolge:

html

<div class="item1">1</div>  <!-- order: 2 -->
<div class="item2">2</div>  <!-- order: 1 -->
<div class="item3">3</div>  <!-- order: 3 -->

Visuelle Reihenfolge (im Grid):

┌──────────┬──────────┬──────────┐
│     2     │     1     │     3     │
│ (order:1)│ (order:2)│ (order:3)│
└──────────┴──────────┴──────────┘

💻 Syntax

css

.element {
  order: <ganze Zahl>;  /* Kann negativ sein! */
}

💻 Beispiel

HTML:

html

<div class="container">
  <div class="item main">Hauptinhalt</div>
  <div class="item sidebar">Sidebar</div>
  <div class="item extra">Extra</div>
</div>

CSS:

css

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

.main {
  order: 2;  /* Zweite Position */
  background-color: #3498db;
  color: white;
  padding: 40px;
  text-align: center;
}

.sidebar {
  order: 1;  /* Erste Position */
  background-color: #2ecc71;
  color: white;
  padding: 40px;
  text-align: center;
}

.extra {
  order: 3;  /* Dritte Position */
  background-color: #e74c3c;
  color: white;
  padding: 40px;
  text-align: center;
}

🔑 Wichtige Punkte

✅ Standardwert: 0 (alle Elemente haben order 0)
✅ Negative Werte erlaubt: -1 erscheint vor 0
✅ Nur visuelle Reihenfolge: HTML bleibt unverändert (wichtig für Accessibility!)

10.4 `z-index`: Überlappung steuern

📖 Definition

Wenn Elemente sich überlappen, bestimmt z-index, welches Element oben liegt.

💻 Syntax

css

.element {
  z-index: <ganze Zahl>;
}

💻 Beispiel

CSS:

css

.container {
  display: grid;
  grid-template-columns: 200px 200px;
  gap: 20px;
}

.item1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  z-index: 2;  /* Liegt oben */
  background-color: rgba(52, 152, 219, 0.8);
  padding: 40px;
}

.item2 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  z-index: 1;  /* Liegt unten */
  background-color: rgba(231, 76, 60, 0.8);
  padding: 40px;
  margin-left: 50px;
  margin-top: 50px;
}

🔑 Wichtige Punkte

✅ Höherer z-index = weiter oben
✅ z-index funktioniert nur, wenn Elemente sich überlappen
✅ Nützlich für Overlays, Modals, etc.

10.5 Praktische Übung: Elemente individuell anpassen

🎯 Übungsziel

Erstellen Sie ein Layout, bei dem ein Element anders ausgerichtet und geordnet ist.

📝 Schritt 1: HTML erstellen

html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Grid Ausrichtung & Ordnung Übung</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="item">Element 1</div>
    <div class="item special">Spezial-Element</div>
    <div class="item">Element 3</div>
    <div class="item">Element 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;
  padding: 20px;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 200px 200px;
  align-items: stretch;     /* Alle Elemente strecken vertikal */
  justify-items: stretch;  /* Alle Elemente strecken horizontal */
  gap: 20px;
  padding: 20px;
  background-color: #f0f0f0;
}

.item {
  background-color: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 18px;
  border-radius: 8px;
}

.special {
  /* Überschreibt Ausrichtung */
  align-self: center;      /* Vertikal zentrieren */
  justify-self: center;    /* Horizontal zentrieren */
  
  /* Ändert Reihenfolge */
  order: -1;              /* Ganz nach vorne */
  
  /* Styling */
  background-color: #e74c3c;
  width: 80%;
  height: 80%;
  z-index: 10;            /* Liegt oben, falls Überlappung */
}

🔍 Schritt 3: Ergebnis beobachten

Was passiert ist:

✅ .special wird vor allen anderen Elementen angezeigt (order: -1)
✅ .special ist zentriert in seiner Zelle (align-self: center, justify-self: center)
✅ .special ist kleiner als andere (width: 80%, height: 80%)
✅ .special liegt oben, falls es Überlappungen gibt (z-index: 10)

10.6 Häufige Fehler bei Ausrichtung und Ordnung

❌ Fehler 1: `align-self` wird ignoriert

Grund: align-items ist nicht am Container gesetzt.

Falsch:

css

.container {
  display: grid;
  /* Kein align-items! */
}

.special {
  align-self: center;  /* Vielleicht keine Wirkung */
}

Richtig:

css

.container {
  display: grid;
  align-items: stretch;  /* Explizit setzen */
}

.special {
  align-self: center;  /* Jetzt wirkt es! */
}

❌ Fehler 2: `order` ändert HTML-Reihenfolge nicht

Wichtig: order ändert nur die visuelle Reihenfolge, nicht die tatsächliche Reihenfolge im DOM!

Problem für Screenreader:

html

<!-- Schlecht für Accessibility -->
<div class="sidebar" style="order: 1">Sidebar</div>
<div class="main" style="order: 2">Main Content</div>

Besser: HTML-Reihenfolge logisch lassen, order nur für visuelle Anpassungen verwenden!

❌ Fehler 3: `z-index` funktioniert nicht

Grund: Elemente überlappen sich nicht.

Falsch:

css

.item1 {
  grid-column: 1 / 2;
  z-index: 10;  /* Wirkungslos, da kein Überlappung */
}

.item2 {
  grid-column: 2 / 3;  /* Keine Überlappung! */
  z-index: 1;
}

Richtig:

css

.item1 {
  grid-column: 1 / 3;  /* Überlappt */
  grid-row: 1 / 2;
  z-index: 10;
}

.item2 {
  grid-column: 2 / 4;  /* Überlappt mit item1 */
  grid-row: 1 / 2;
  z-index: 1;
}

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

✅ align-self:

Vertikale Ausrichtung für einzelnes Element
Überschreibt align-items

✅ justify-self:

Horizontale Ausrichtung für einzelnes Element
Überschreibt justify-items

✅ order:

Visuelle Reihenfolge ändern
Negative Werte erlaubt

✅ z-index:

Überlappung steuern
Höherer Wert = weiter oben

✅ Praktische Übung:

Element individuell angepasst
Ausrichtung und Ordnung kombiniert

✅ Häufige Fehler:

align-self wird ignoriert (kein align-items am Container)
order ändert nicht die HTML-Reihenfolge (Accessibility!)
z-index funktioniert nicht ohne Überlappung

🎯 Nächste Schritte

Im nächsten Kapitel lernen Sie:

📖 auto-fill und auto-fit verwenden
🎯 Automatische Grid-Spalten erstellen
🛠️ Responsive Grids ohne Media Queries

👉 Weiter zu Kapitel 11: Automatisches Grid

💡 Tipps für Element-Ausrichtung

Verwenden Sie align-self sparsam: Zu viele verschiedene Ausrichtungen sehen unordentlich aus
order nur für visuelle Anpassungen: Accessibility beachten!
z-index nur bei Bedarf: Überlappungen vermeiden, wenn möglich
Testen Sie mit Screenreadern: Prüfen Sie, ob die Reihenfolge für Blinde logisch ist
DevTools nutzen: Firefox zeigt order und z-index visualisiert an

Viel Erfolg beim Grid-Lernen! 🚀

Kapitel 10: Elemente ausrichten und ordnen ​

🎯 Lernziele ​

10.1 align-self: Vertikale Ausrichtung überschreiben ​

📖 Definition ​

🎨 Visuelle Erklärung ​

💻 Syntax ​

💻 Beispiel ​

🔑 Wichtige Punkte ​

10.2 justify-self: Horizontale Ausrichtung überschreiben ​

📖 Definition ​

💻 Syntax ​

💻 Beispiel ​

10.3 order: Reihenfolge ändern ​

📖 Definition ​

🎨 Visuelle Erklärung ​

💻 Syntax ​

💻 Beispiel ​

🔑 Wichtige Punkte ​

10.4 z-index: Überlappung steuern ​

📖 Definition ​

💻 Syntax ​

💻 Beispiel ​

🔑 Wichtige Punkte ​

10.5 Praktische Übung: Elemente individuell anpassen ​

🎯 Übungsziel ​

📝 Schritt 1: HTML erstellen ​

📝 Schritt 2: CSS erstellen ​

🔍 Schritt 3: Ergebnis beobachten ​

10.6 Häufige Fehler bei Ausrichtung und Ordnung ​

❌ Fehler 1: align-self wird ignoriert ​

❌ Fehler 2: order ändert HTML-Reihenfolge nicht ​

❌ Fehler 3: z-index funktioniert nicht ​

📝 Zusammenfassung ​

🎯 Nächste Schritte ​

💡 Tipps für Element-Ausrichtung ​

Kapitel 10: Elemente ausrichten und ordnen

🎯 Lernziele

10.1 `align-self`: Vertikale Ausrichtung überschreiben

📖 Definition

🎨 Visuelle Erklärung

💻 Syntax

💻 Beispiel

🔑 Wichtige Punkte

10.2 `justify-self`: Horizontale Ausrichtung überschreiben

📖 Definition

💻 Syntax

💻 Beispiel

10.3 `order`: Reihenfolge ändern

📖 Definition

🎨 Visuelle Erklärung

💻 Syntax

💻 Beispiel

🔑 Wichtige Punkte

10.4 `z-index`: Überlappung steuern

📖 Definition

💻 Syntax

💻 Beispiel

🔑 Wichtige Punkte

10.5 Praktische Übung: Elemente individuell anpassen

🎯 Übungsziel

📝 Schritt 1: HTML erstellen

📝 Schritt 2: CSS erstellen

🔍 Schritt 3: Ergebnis beobachten

10.6 Häufige Fehler bei Ausrichtung und Ordnung

❌ Fehler 1: `align-self` wird ignoriert

❌ Fehler 2: `order` ändert HTML-Reihenfolge nicht

❌ Fehler 3: `z-index` funktioniert nicht

📝 Zusammenfassung

🎯 Nächste Schritte

💡 Tipps für Element-Ausrichtung