Layouts in der Praxis

Du kennst jetzt Flexbox und Grid — aber wie setzt du sie in der Praxis ein? In diesem Kapitel bauen wir echte Webseiten-Layouts und lernst bewaehrte Patterns kennen, die du in jedem Projekt verwenden kannst.

Pattern 1: Das Seitenlayout

Fast jede Webseite hat diese Grundstruktur: Header, Navigation, Hauptinhalt, Footer.

<body>
    <header class="site-header">
        <nav class="navbar">
            <a href="/" class="logo">MeineSite</a>
            <ul class="nav-links">
                <li><a href="/">Home</a></li>
                <li><a href="/about">Ueber uns</a></li>
                <li><a href="/kontakt">Kontakt</a></li>
            </ul>
        </nav>
    </header>

    <main class="main-content">
        <article class="content">
            <h1>Willkommen</h1>
            <p>Hauptinhalt hier...</p>
        </article>
        <aside class="sidebar">
            <h3>Sidebar</h3>
            <p>Zusaetzliche Infos...</p>
        </aside>
    </main>

    <footer class="site-footer">
        <p>&copy; 2026 MeineSite</p>
    </footer>
</body>

/* Sticky Footer mit Flexbox */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

/* Navigation */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: #1a1a2e;
    color: white;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #e44d26;
    text-decoration: none;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

.nav-links a {
    color: white;
    text-decoration: none;
}

/* Hauptbereich mit Sidebar */
.main-content {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    flex: 1; /* Fuellt den verfuegbaren Platz */
    width: 100%;
}

.content {
    min-width: 0; /* Verhindert Overflow bei langen Woertern */
}

.sidebar {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 8px;
    align-self: start; /* Sidebar waechst nicht mit */
}

/* Footer */
.site-footer {
    background: #1a1a2e;
    color: white;
    text-align: center;
    padding: 2rem;
}

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

Pattern 2: Der Container

Ein zentrierter Container mit maximaler Breite:

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Verschiedene Container-Groessen */
.container-sm { max-width: 640px; }
.container-md { max-width: 768px; }
.container-lg { max-width: 1024px; }
.container-xl { max-width: 1280px; }

Pattern 3: Card-Raster

<section class="card-grid">
    <div class="card">
        <img src="https://picsum.photos/400/200?1" alt="Bild 1">
        <div class="card-body">
            <h3>Card Titel</h3>
            <p>Kurze Beschreibung der Card.</p>
            <a href="#" class="card-link">Mehr lesen</a>
        </div>
    </div>
    <!-- Weitere Cards... -->
</section>

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 1.5rem;
}

.card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s, transform 0.2s;
}

.card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-body h3 {
    margin: 0 0 0.5rem;
}

.card-body p {
    color: #4a5568;
    flex: 1;
}

.card-link {
    color: #e44d26;
    text-decoration: none;
    font-weight: 600;
    margin-top: 1rem;
}

Pattern 4: Hero-Sektion

<section class="hero">
    <div class="hero-content">
        <h1>Lerne Webentwicklung</h1>
        <p>Starte noch heute mit HTML, CSS und JavaScript.</p>
        <div class="hero-buttons">
            <a href="#start" class="btn btn-primary">Jetzt starten</a>
            <a href="#mehr" class="btn btn-secondary">Mehr erfahren</a>
        </div>
    </div>
</section>

.hero {
    display: grid;
    place-items: center;
    min-height: 80vh;
    padding: 2rem;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    color: white;
    text-align: center;
}

.hero-content {
    max-width: 700px;
}

.hero h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    margin-bottom: 1rem;
    line-height: 1.1;
}

.hero p {
    font-size: 1.25rem;
    color: #a0aec0;
    margin-bottom: 2rem;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.2s;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: #e44d26;
    color: white;
}

.btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

Pattern 5: Features-Raster

<section class="features">
    <div class="feature">
        <div class="feature-icon">&#9889;</div>
        <h3>Schnell</h3>
        <p>Blitzschnelle Ladezeiten dank optimiertem Code.</p>
    </div>
    <div class="feature">
        <div class="feature-icon">&#128274;</div>
        <h3>Sicher</h3>
        <p>Modernste Sicherheitsstandards implementiert.</p>
    </div>
    <div class="feature">
        <div class="feature-icon">&#128241;</div>
        <h3>Responsiv</h3>
        <p>Perfekt auf jedem Geraet -- Handy bis Desktop.</p>
    </div>
</section>

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.feature {
    text-align: center;
    padding: 2rem;
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.feature h3 {
    margin-bottom: 0.5rem;
    color: #1a1a2e;
}

.feature p {
    color: #4a5568;
    line-height: 1.6;
}

Pattern 6: Flexbox + Grid kombiniert

/* Grid fuer das Gesamtlayout */
.page {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

/* Flexbox fuer die Navigation */
.page header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Grid fuer den Inhaltsbereich */
.page main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem;
}

/* Flexbox fuer einzelne Cards */
.page main .card {
    display: flex;
    flex-direction: column;
}

/* Flexbox fuer den Footer */
.page footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem;
}

Nuetzliche Layout-Helfer

Der “Full-Bleed” Trick

Inhalte, die aus einem zentrierten Container ausbrechen:

.wrapper {
    display: grid;
    grid-template-columns:
        1fr
        min(65ch, 100%)
        1fr;
}

.wrapper > * {
    grid-column: 2;
}

.wrapper > .full-bleed {
    grid-column: 1 / -1;
    width: 100%;
}

Gleichmaessig hohe Cards

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* Grid sorgt automatisch fuer gleiche Hoehe pro Zeile */

/* Button am unteren Rand der Card */
.card {
    display: flex;
    flex-direction: column;
}

.card .card-body {
    flex: 1;
}

.card button {
    margin-top: auto; /* Drueckt den Button nach unten */
}

Uebungen

Uebung 1: Landing Page

Baue eine komplette Landing Page mit:

Hero-Sektion (zentrierter Text, Gradient-Hintergrund)
Features-Raster (3 Spalten)
Card-Sektion (responsive Grid)
Footer mit 4 Spalten

Uebung 2: Dashboard

Erstelle ein Dashboard-Layout mit:

Seitenleiste links (feste Breite)
Hauptbereich mit Statistik-Cards
Responsive: Sidebar verschwindet auf Mobilgeraeten

Uebung 3: Blog-Uebersicht

Erstelle eine Blog-Uebersichtsseite mit:

Featured Post (breiter, oben)
Weitere Posts im Grid darunter
Sidebar mit Kategorien

Was kommt als Naechstes?

Im naechsten Kapitel beginnen wir mit Responsive Design — dem Anpassen von Layouts an verschiedene Bildschirmgroessen:

Was Responsive Design bedeutet
Viewport und relative Einheiten
Fluid Layouts

Zusammenfassung

Sticky Footer: body { display: flex; flex-direction: column; min-height: 100vh; } mit main { flex: 1; }
Container: max-width + margin: 0 auto fuer zentrierte Inhalte
Card-Raster: repeat(auto-fit, minmax(300px, 1fr)) fuer responsive Grids
Hero-Sektion: display: grid; place-items: center; min-height: 80vh;
Flexbox und Grid ergaenzen sich: Grid fuer das Seitenlayout, Flexbox fuer Komponenten
Buttons nach unten druecken: flex: 1 auf dem Body + margin-top: auto auf dem Button

Pro-Tipp: Baue dir eine eigene Sammlung von Layout-Patterns (Snippets) in VS Code. Die Muster aus diesem Kapitel wirst du immer wieder verwenden. Mit Custom Snippets sparst du dir das Neuschreiben und kannst dich auf den individuellen Inhalt konzentrieren!