CSS Grid
CSS Grid
Grid-Spalten, Zeilen, gap, Platzierung und responsive Raster. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.
Lernziele
- Grid für zweidimensionale Layouts nutzen
- Spalten und Zeilen definieren
- Flexbox und Grid sinnvoll abgrenzen
Erklärung
CSS Grid arbeitet mit Zeilen und Spalten. Es eignet sich für Layouts, bei denen beide Dimensionen wichtig sind: Galerien, Dashboards, Formularraster oder Seitenbereiche.
Mit repeat, minmax und auto-fit entstehen responsive Raster ohne viele Media Queries.
Beispiele
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}
Das Raster erzeugt so viele Spalten wie sinnvoll passen.
.feature {
grid-column: span 2;
}
@media (max-width: 40rem) {
.feature {
grid-column: span 1;
}
}
Ein Element kann mehrere Spalten einnehmen, muss mobil aber geprüft werden.
Typische Fehler
- Grid für eine einfache horizontale Buttonreihe verwenden.
- Feste Pixelspalten definieren, die auf Smartphones überlaufen.
- Zu komplexe Platzierung ohne klare Lesereihenfolge bauen.
Best Practices
- Nutze Grid für echte Raster.
- Halte die DOM-Reihenfolge logisch, auch wenn Grid visuell umsortieren kann.
- Verwende
minmaxfür robuste responsive Spalten.
Kleine Übung
Erstelle ein Kartenraster mit mindestens sechs Karten. Auf breiten Bildschirmen sollen mehrere Spalten entstehen, auf Smartphones eine Spalte.
Zusammenfassung
CSS sollte Gestaltung systematisch lösen: klare Selektoren, wiederkehrende Werte, responsive Layouts und verständliche Zustände. Gute Stylesheets bleiben auch bei wachsenden Seiten wartbar.
Weiterführende Seiten
Zuletzt aktualisiert: 7. Juni 2026