Etappe 1 – Grundlagen · Lektion 10 von 11 · Lernziel: Mit Flexbox und Grid responsive Inhaltsbereiche aufbauen.
Voraussetzung: Grundlagen aus Lektion 9; arbeite im selben Projekt modellbau-webseite.
Zwei Werkzeuge für Layouts
Flexbox ist ideal für Elemente in einer Reihe oder Spalte, etwa ein Menü. CSS Grid eignet sich besonders für Raster aus Karten. Wir bauen jetzt eine Projekte-Übersicht, die auf breiten Bildschirmen mehrere Karten nebeneinander zeigt.
Ersetze src/pages/projekte.astro
---
const projekte = [
{ titel: 'Modellflug', text: 'Meine selbst gebauten Flugmodelle.', bild: '/bilder/modellflug.jpg' },
{ titel: '3D-Druck', text: 'Gedruckte Bauteile und Konstruktionen.', bild: '/bilder/3d-druck.jpg' },
{ titel: 'Elektronik', text: 'Experimente mit Mikrocontrollern.', bild: '/bilder/elektronik.jpg' },
];
---
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Projekte | Modellbau-Werkstatt</title>
</head>
<body>
<header>
<nav aria-label="Hauptnavigation">
<a href="/">Startseite</a>
<a href="/projekte">Projekte</a>
<a href="/kontakt">Kontakt</a>
</nav>
</header>
<main>
<h1>Meine Projekte</h1>
<div class="raster">
{projekte.map((projekt) => (
<article class="karte">
<img src={projekt.bild} alt={projekt.titel} width="480" height="270" />
<h2>{projekt.titel}</h2>
<p>{projekt.text}</p>
</article>
))}
</div>
</main>
</body>
</html>
<style>
:global(body) { margin: 0; font-family: Arial, sans-serif; background: #f4f6f8; color: #243447; line-height: 1.6; }
header { background: #183247; }
nav { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px; }
nav a { color: white; }
main { max-width: 1000px; margin: auto; padding: 20px; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.karte { background: white; padding: 16px; border-radius: 12px; }
.karte img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
</style>Bilder hinzufügen
Lege drei Bilder in public/bilder/ ab: modellflug.jpg, 3d-druck.jpg und elektronik.jpg. Alternativ entferne das <img>-Element, solange keine Bilder vorliegen.
Was passiert in den Styles?
display: flex ordnet die Menülinks in einer Zeile an. flex-wrap: wrap erlaubt den Zeilenumbruch. display: grid erstellt ein Raster. repeat(auto-fit, ...) sorgt dafür, dass abhängig vom verfügbaren Platz unterschiedlich viele Karten nebeneinander liegen.
Übung
Ergänze ein viertes Projekt zum Array. Ändere gap: 20px auf gap: 32px und beobachte den Abstand zwischen den Karten.
Lösungshinweis: Ein neues Objekt mit titel, text und bild im Array ergänzen und ein passendes Bild ablegen.
Weitere Informationen: Offizielle Astro-Dokumentation.