Ein responsives Projekt-Grid
CSS ohne das C: Layouts mit Grid
Jedes gute Portfolio braucht eine saubere Art, deine Arbeiten zu präsentieren. Das klassische Muster ist ein Grid aus Projektkarten — ordentliche Zeilen und Spalten, die sich automatisch neu anordnen, wenn sich die Bildschirmgröße ändert.
Früher bedeutete das: Kampf mit Floats und Clearfixes. Und heute? Du beschreibst, was du willst — „drei gleich breite Spalten mit Abstand“ — und Tailwinds Grid-Utilities erledigen den Rest. Ganz ohne CSS-Datei.
In dieser Lektion baust du ein responsives Projekt-Grid: eine Überschrift und darunter einen grid-Container mit drei Karten. Am Ende verstehst du grid, grid-cols-3 und gap — die drei Werkzeuge, zu denen du immer wieder greifen wirst.
Anweisungen
Füge über deinem Grid eine h2-Abschnittsüberschrift hinzu, damit Besucher wissen, was sie sehen.
Tipp: Verwende: `<h2 class="text-3xl font-bold mb-8 text-center">Ausgewählte Projekte</h2>`
Wo kommt das hin?
<!-- Baue hier dein Projekt-Grid -->Schreib es in Zeile 12 — unter diesem Kommentar, nach dem Code, den du schon ergänzt hast.
Erstelle einen Grid-Container-div mit grid und einem Abstand (gap) zwischen den Karten.
Lass das Grid auf mittleren Bildschirmen und größer drei gleich breite Spalten anzeigen.
Füge mindestens eine Projektkarte als article-Element mit Titel und Beschreibung in das Grid ein.
Dein Code
Beschreibe, was du für diesen Schritt bauen willst, und ich schreibe den Code — klicke dann auf Übernehmen, um ihn in deinen Editor zu übertragen. Dieser Schritt: Füge über deinem Grid eine h2-Abschnittsüberschrift hinzu, damit Besucher wissen, was sie sehen.