Kapitel 12: Grundlegende Praxis

🎯 Lernziele

In diesem Kapitel lernen Sie:

✅ Einfache Grid-Layouts erstellen
✅ Karten-Grid für E-Commerce erstellen
✅ Webseiten-Gesamtlayout umsetzen
✅ Überlappende Elemente platzieren

12.1 Praxis 1: Einfaches Grid-Layout

🎯 Ziel

Erstellen Sie ein einfaches 3-Spalten-Grid mit gleichmäßigen Abständen.

📝 Schritt 1: HTML erstellen

html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Einfaches Grid Layout</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Meine Galerie</h1>
  
  <div class="gallery">
    <div class="item">Bild 1</div>
    <div class="item">Bild 2</div>
    <div class="item">Bild 3</div>
    <div class="item">Bild 4</div>
    <div class="item">Bild 5</div>
    <div class="item">Bild 6</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;
}

h1 {
  text-align: center;
  margin-bottom: 40px;
  color: #2c3e50;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 gleich breite Spalten */
  gap: 30px;  /* Abstand zwischen Elementen */
  max-width: 1200px;
  margin: 0 auto;
}

.item {
  background-color: #3498db;
  color: white;
  padding: 80px 40px;
  text-align: center;
  font-size: 24px;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.item:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

🔍 Ergebnis

Desktop:

┌──────────┬──────────┬──────────┐
│  Bild 1  │  Bild 2  │  Bild 3  │
├──────────┼──────────┼──────────┤
│  Bild 4  │  Bild 5  │  Bild 6  │
└──────────┴──────────┴──────────┘

Tablet (Anpassung mit Media Query):

css

@media (max-width: 1024px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);  /* 2 Spalten */
  }
}

Mobile:

css

@media (max-width: 768px) {
  .gallery {
    grid-template-columns: 1fr;  /* 1 Spalte */
  }
}

12.2 Praxis 2: Karten-Grid (E-Commerce)

🎯 Ziel

Erstellen Sie ein responsives Produktkarten-Grid mit auto-fit und minmax().

📝 Schritt 1: HTML erstellen

html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Produktkarten Grid</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Unsere Produkte</h1>
  
  <div class="products">
    <div class="card">
      <div class="card-image">Bild</div>
      <div class="card-content">
        <h3>Produkt 1</h3>
        <p>Beschreibung des Produkts 1</p>
        <div class="price">€29.99</div>
        <button>In Warenkorb</button>
      </div>
    </div>
    
    <div class="card">
      <div class="card-image">Bild</div>
      <div class="card-content">
        <h3>Produkt 2</h3>
        <p>Beschreibung des Produkts 2</p>
        <div class="price">€39.99</div>
        <button>In Warenkorb</button>
      </div>
    </div>
    
    <div class="card">
      <div class="card-image">Bild</div>
      <div class="card-content">
        <h3>Produkt 3</h3>
        <p>Beschreibung des Produkts 3</p>
        <div class="price">€49.99</div>
        <button>In Warenkorb</button>
      </div>
    </div>
    
    <div class="card">
      <div class="card-image">Bild</div>
      <div class="card-content">
        <h3>Produkt 4</h3>
        <p>Beschreibung des Produkts 4</p>
        <div class="price">€19.99</div>
        <button>In Warenkorb</button>
      </div>
    </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;
}

h1 {
  text-align: center;
  margin-bottom: 40px;
  color: #2c3e50;
}

.products {
  display: grid;
  /* MAGIE: Automatisches responsives Grid! */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
}

.card {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.card-image {
  background-color: #ecf0f1;
  padding: 80px 20px;
  text-align: center;
  font-size: 20px;
  color: #7f8c8d;
}

.card-content {
  padding: 25px;
}

.card-content h3 {
  color: #2c3e50;
  margin-bottom: 10px;
  font-size: 22px;
}

.card-content p {
  color: #7f8c8d;
  line-height: 1.6;
  margin-bottom: 15px;
}

.price {
  font-size: 26px;
  font-weight: bold;
  color: #e74c3c;
  margin-bottom: 20px;
}

.card-content button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.3s ease;
  width: 100%;
}

.card-content button:hover {
  background-color: #2980b9;
}

🔍 Ergebnis

Vorteile dieser Methode:

✅ Keine Media Queries nötig! (für das Grid)
✅ Karten sind mindestens 280px breit
✅ Wenn Platz ist, dehnen sie sich auf 1fr
✅ Automatische Anpassung an Bildschirmbreite

12.3 Praxis 3: Webseiten-Gesamtlayout

🎯 Ziel

Erstellen Sie ein klassisches Webseiten-Layout mit Header, Sidebar, Main und Footer.

📝 Schritt 1: HTML erstellen

html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Webseiten Layout</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <header class="header">
      <h1>Meine Webseite</h1>
      <nav>
        <a href="#">Home</a>
        <a href="#">Über uns</a>
        <a href="#">Kontakt</a>
      </nav>
    </header>
    
    <aside class="sidebar">
      <h3>Sidebar</h3>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </aside>
    
    <main class="main">
      <h2>Willkommen!</h2>
      <p>Dies ist der Hauptinhalt der Webseite.</p>
      <p>Hier können Sie beliebigen Inhalt einfügen.</p>
    </main>
    
    <footer class="footer">
      <p>&copy; 2026 Meine Webseite</p>
    </footer>
  </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: 250px 1fr;  /* Sidebar + Main */
  grid-template-rows: auto auto 1fr auto;  /* Header, Nav, Main, Footer */
  grid-template-areas:
    "header header"
    "nav    nav"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
  gap: 20px;
  padding: 20px;
}

.header {
  grid-area: header;
  background-color: #2c3e50;
  color: white;
  padding: 30px;
  text-align: center;
  border-radius: 8px;
}

.header nav {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 30px;
}

.header nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.header nav a:hover {
  color: #3498db;
}

.sidebar {
  grid-area: sidebar;
  background-color: #ecf0f1;
  padding: 25px;
  border-radius: 8px;
}

.sidebar h3 {
  color: #2c3e50;
  margin-bottom: 15px;
}

.sidebar ul {
  list-style: none;
}

.sidebar ul li {
  margin-bottom: 10px;
}

.sidebar ul li a {
  color: #3498db;
  text-decoration: none;
}

.sidebar ul li a:hover {
  text-decoration: underline;
}

.main {
  grid-area: main;
  padding: 25px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.main h2 {
  color: #2c3e50;
  margin-bottom: 20px;
}

.main p {
  color: #34495e;
  line-height: 1.8;
  margin-bottom: 15px;
}

.footer {
  grid-area: footer;
  background-color: #2c3e50;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
}

/* Responsive Anpassung für Mobile */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;  /* Eine Spalte */
    grid-template-areas:
      "header"
      "nav"
      "main"
      "sidebar"
      "footer";
  }
  
  .header nav {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
}

🔍 Ergebnis

Desktop:

┌─────────────────────────────────┐
│            Header               │
├─────────────────────────────────┤
│             Nav                 │
├────────────┬────────────────────┤
│  Sidebar   │      Main          │
├────────────┴────────────────────┤
│            Footer               │
└─────────────────────────────────┘

Mobile:

┌──────────┐
│  Header   │
├──────────┤
│    Nav    │
├──────────┤
│   Main    │
├──────────┤
│  Sidebar  │
├──────────┤
│  Footer   │
└──────────┘

12.4 Praxis 4: Überlappende Elemente

🎯 Ziel

Erstellen Sie ein Layout mit überlappenden Elementen (z.B. Hero-Bereich mit überlappendem Text).

📝 Schritt 1: HTML erstellen

html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Überlappendes Layout</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="hero">
    <div class="hero-image">Hintergrundbild</div>
    <div class="hero-text">
      <h1>Willkommen!</h1>
      <p>Entdecken Sie unsere Produkte</p>
      <button>Jetzt shoppen</button>
    </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;
}

.hero {
  display: grid;
  /* Beide Elemente in dieselbe Zelle platzieren */
  grid-template-columns: 1fr;
  grid-template-rows: 500px;
}

.hero-image {
  grid-column: 1 / -1;  /* Alle Spalten */
  grid-row: 1 / -1;       /* Alle Zeilen */
  background: linear-gradient(135deg, #3498db, #8e44ad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: rgba(255,255,255,0.3);
  border-radius: 12px;
}

.hero-text {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  z-index: 10;  /* Über das Bild legen */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  padding: 40px;
}

.hero-text h1 {
  font-size: 56px;
  margin-bottom: 20px;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}

.hero-text p {
  font-size: 24px;
  margin-bottom: 30px;
}

.hero-text button {
  background-color: white;
  color: #3498db;
  border: none;
  padding: 15px 40px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 50px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-text button:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

🔍 Ergebnis

Visuelle Erklärung:

┌─────────────────────────────────┐
│                                 │
│        Hintergrundbild           │  ← hero-image (unten)
│                                 │
│                                 │
│      "Willkommen!"               │  ← hero-text (oben, überlappt)
│  "Entdecken Sie unsere          │
│   Produkte"                     │
│                                 │
│      [Jetzt shoppen]            │
│                                 │
└─────────────────────────────────┘

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

✅ Praxis 1: Einfaches Grid-Layout

3-Spalten-Grid erstellt
Responsive Anpassungen vorgenommen

✅ Praxis 2: Karten-Grid (E-Commerce)

auto-fit und minmax() verwendet
Responsives Grid ohne Media Queries

✅ Praxis 3: Webseiten-Gesamtlayout

grid-template-areas verwendet
Klassisches Layout mit Header, Sidebar, Main, Footer

✅ Praxis 4: Überlappende Elemente

grid-column und grid-row für Überlappung
z-index für Ebenen-Steuerung

🎯 Nächste Schritte

Im nächsten Kapitel lernen Sie:

📖 Fortgeschrittene Praxis-Projekte
🎯 Komplexe Layouts umsetzen
🛠️ Grid mit Flexbox kombinieren

👉 Weiter zu Kapitel 13: Fortgeschrittene Praxis

💡 Tipps für die Praxis

Planen Sie das Layout auf Papier: Skizzieren Sie das Grid vor dem Coden
Verwenden Sie grid-template-areas: Macht den Code lesbarer
Testen Sie auf echten Geräten: Responsives Verhalten ist wichtig
Kombinieren Sie Grid und Flexbox: Grid für Gesamtlayout, Flexbox für Komponenten
Verwenden Sie auto-fit und minmax(): Für moderne responsive Grids

Viel Erfolg beim Grid-Lernen! 🚀

Kapitel 12: Grundlegende Praxis ​

🎯 Lernziele ​

12.1 Praxis 1: Einfaches Grid-Layout ​

🎯 Ziel ​

📝 Schritt 1: HTML erstellen ​

📝 Schritt 2: CSS erstellen ​

🔍 Ergebnis ​

12.2 Praxis 2: Karten-Grid (E-Commerce) ​

🎯 Ziel ​

📝 Schritt 1: HTML erstellen ​

📝 Schritt 2: CSS erstellen ​

🔍 Ergebnis ​

12.3 Praxis 3: Webseiten-Gesamtlayout ​

🎯 Ziel ​

📝 Schritt 1: HTML erstellen ​

📝 Schritt 2: CSS erstellen ​

🔍 Ergebnis ​

12.4 Praxis 4: Überlappende Elemente ​

🎯 Ziel ​

📝 Schritt 1: HTML erstellen ​

📝 Schritt 2: CSS erstellen ​

🔍 Ergebnis ​

📝 Zusammenfassung ​

🎯 Nächste Schritte ​

💡 Tipps für die Praxis ​

Kapitel 12: Grundlegende Praxis

🎯 Lernziele

12.1 Praxis 1: Einfaches Grid-Layout

🎯 Ziel

📝 Schritt 1: HTML erstellen

📝 Schritt 2: CSS erstellen

🔍 Ergebnis

12.2 Praxis 2: Karten-Grid (E-Commerce)

🎯 Ziel

📝 Schritt 1: HTML erstellen

📝 Schritt 2: CSS erstellen

🔍 Ergebnis

12.3 Praxis 3: Webseiten-Gesamtlayout

🎯 Ziel

📝 Schritt 1: HTML erstellen

📝 Schritt 2: CSS erstellen

🔍 Ergebnis

12.4 Praxis 4: Überlappende Elemente

🎯 Ziel

📝 Schritt 1: HTML erstellen

📝 Schritt 2: CSS erstellen

🔍 Ergebnis

📝 Zusammenfassung

🎯 Nächste Schritte

💡 Tipps für die Praxis