⚡CSS Layout

CSS Grid Layouts

Zweidimensionale Layouts die mit Flexbox unmoeglich sind

CSS Grid ist das maechtigste Layout-Tool im Web. Waehrend Flexbox eine Dimension beherrscht, kontrolliert Grid Zeilen UND Spalten gleichzeitig. Dashboards, Bildergalerien, komplexe Seitenlayouts, alles wird mit Grid einfach.

Pro-Tip — Der schnelle Weg

Nutz grid-template-areas fuer komplexe Layouts. Du zeichnest das Layout quasi als ASCII-Art und CSS setzt es pixelgenau um.

Seite 1

Grundlagen verstehen

Grid erstellt ein Raster aus Zeilen und Spalten. Mit grid-template-columns definierst du die Spalten, mit grid-template-rows die Zeilen. fr ist die Einheit fuer flexible Anteile.

<div className="grid grid-cols-3 gap-4">
<div>Spalte 1</div>
<div>Spalte 2</div>
<div>Spalte 3</div>
</div>

Responsive Grid

Mit Tailwind Breakpoints machst du jedes Grid responsiv. Eine Spalte auf Mobile, zwei auf Tablet, vier auf Desktop. Kein Media-Query schreiben noetig.

Elemente ueber Spalten spannen

Mit col-span laesst du ein Element mehrere Spalten einnehmen. Perfekt fuer Dashboard-Widgets die breiter sein sollen als andere.

<div className="grid grid-cols-4 gap-4">
<div className="col-span-2">Breites Widget</div>
<div>Klein</div>
<div>Klein</div>
<div className="col-span-4">Volle Breite</div>
</div>

Auto-Fill fuer dynamische Grids

Mit auto-fill und minmax passt sich das Grid automatisch an. So viele Spalten wie reinpassen, mindestens 250px breit. Perfekt fuer Produktlisten.

/* In globals.css */
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}

Seite 2

Warum das funktioniert

Zweidimensionale Kontrolle die mit Flexbox unmoeglich ist
Responsive Grids ohne Media Queries mit auto-fill
Tailwind macht Grid-Klassen intuitiv lesbar
Weniger verschachtelte Divs fuer saubereren HTML-Code

Tipps

Grid fuer 2D-Layouts, Flexbox fuer 1D-Anordnungen
auto-fill vs auto-fit: fill erstellt leere Spalten, fit streckt vorhandene
place-items-center zentriert alles horizontal und vertikal
Grid und Flexbox kombinieren fuer maximale Flexibilitaet

Seite 3

Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen