Responsives Grid CSS
Grid Areas half Ihnen, eine Seite benannt zu kartieren. Responsives Grid fragt: Was passiert, wenn der Viewport schmaler wird? Kollabieren Spalten? Rutscht die Sidebar unter den Header? Fließen Karten ohne zweites HTML? Ein paar ruhige Breakpoint-Muster — das Responsive-Modul folgt.
Werkzeugkiste responsives Grid
📊 Responsives Grid auf einen Blick
| Werkzeug | Alltagsaufgabe |
|---|---|
grid-template-columns |
Track-Liste in einer Media Query tauschen (z. B. zwei → eine Spalte) |
grid-template-areas |
Benannte Karte neu zeichnen, wenn Stapeln besser ist als nebeneinander |
repeat(auto-fit, minmax(...)) |
Fließende Karten-Spalten ohne Breakpoint pro Anzahl |
| Media Query | Grid-Änderungen nur bei passendem Viewport |
gap |
Rhythmus bei Track- oder Kartenwechsel |
| Kein Extra-HTML pro Breite | Gleiches DOM; CSS verschiebt das Layout |
Starten Sie vom Grid, dem Sie auf breiten Screens vertrauen. An einem klaren Breakpoint Spalten, Zeilen oder die Area-Map ändern — nicht alles auf einmal. Namen aus der letzten Lektion machen Umschreibungen lesbar.
Spalten am Breakpoint
Wenn eine Zwei-Spalten-Hülle auf dem Handy einspaltig werden soll, grid-template-columns in einer Media Query ändern.
.shell {
display: grid;
grid-template-columns: 14rem 1fr;
gap: 1rem;
}
@media (max-width: 40rem) {
.shell {
grid-template-columns: 1fr;
}
}
Area-Map auf schmalen Screens neu zeichnen
Header / Aside / Main nebeneinander brauchen oft einen neuen grid-template-areas-Block, wenn die Sidebar unter den Header soll. Zeilen in Anführungszeichen neu schreiben; Rechtecke beibehalten.
.shell {
display: grid;
grid-template-columns: 14rem 1fr;
grid-template-areas:
"header header"
"aside main"
"footer footer";
gap: 1rem;
}
@media (max-width: 48rem) {
.shell {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"aside"
"main"
"footer";
}
}
auto-fit und minmax für Karten-Boards
Für Galerien und Dashboards lässt repeat(auto-fit, minmax(...)) Spalten je nach Platz erscheinen und umbrechen — oft mit weniger manuellen Breakpoints.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}
Schmale Viewports sind keine andere Layout-Sprache — gleiche Grid-Tools, andere Tracks oder Maps. CSS statt doppeltem „Mobile-HTML“.
Ruhige Gewohnheit responsives Grid
Zuerst ein Haupt-Breakpoint. Spaltenwechsel mit Map-Umschreibung paaren, wenn Labels helfen. auto-fit, wo die Kartenanzahl flexibel sein soll. DOM-Reihenfolge für Tastatur sinnvoll halten. Volle Breakpoint-Systeme im Responsive-Modul.
.page {
display: grid;
grid-template-columns: minmax(12rem, 16rem) 1fr;
grid-template-areas: "nav content";
gap: 1.25rem;
}
@media (max-width: 42rem) {
.page {
grid-template-columns: 1fr;
grid-template-areas:
"nav"
"content";
}
}
.stats {
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr));
gap: 0.75rem;
}
@media (max-width: 36rem) {
.stats {
grid-template-columns: 1fr;
}
}
Selbst ausprobieren
- Zwei-Spalten-Hülle unter
max-width: 40remeinspaltig machen. - Header / Aside / Main / Footer-Map für schmales Stapeln umschreiben.
- Kartenzeile mit
repeat(auto-fit, minmax(14rem, 1fr))bauen. - Einen ruhigen Breakpoint hinzufügen.
- Ein HTML-Baum; als Nächstes Responsive Design.
Typische Fehler
- Tracks ewig schrumpfen statt Spalten zu wechseln oder zu stapeln
- Separates „Mobile-HTML“ statt Grid in CSS anzupassen
- Ungleiche Zellenzahl bei neuen
grid-template-areas-Zeilen - Eine riesige Media Query, die alles zurücksetzt
- Diese Lektion als ganzen Responsive-Kurs behandeln
Zusammenfassung
- Responsives Grid passt Spalten, Maps und auto-fit-Boards an Breiten an
- Media Queries begrenzen Track- und Map-Änderungen
- Benannte Areas passen zu Map-Umschreibungen auf kleinen Screens
- Ruhige Breakpoints, ein DOM
- Grid-Modul (490–530) abgeschlossen; Responsive-Modul folgt
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt