CSS Grid und Flexbox lösen unterschiedliche Layoutaufgaben. Grid eignet sich für eine gemeinsame Ausrichtung über Zeilen und Spalten. Flexbox ist hilfreich, wenn Elemente entlang einer Achse angeordnet werden sollen und sich ihre Größe am verfügbaren Platz orientiert.
Flexbox für eine Komponente
Das folgende Beispiel legt Richtung, Umbruch und Ausrichtung eines Containers fest. Es ist eine Auswahl von Eigenschaften; passen Sie die Kombination an die Inhalte Ihrer Komponente an.
.flex-container {
display: flex;
/* Richtung */
flex-direction: row; /* row | row-reverse | column | column-reverse */
/* Umbruch */
flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
/* Ausrichtung Hauptachse */
justify-content: space-between; /* flex-start | flex-end | center | space-around | space-evenly */
/* Ausrichtung Querachse */
align-items: center; /* stretch | flex-start | flex-end | center | baseline */
/* Ausrichtung mehrerer Zeilen */
align-content: flex-start; /* stretch | flex-start | flex-end | center | space-between | space-around */
/* Abstand zwischen Elementen */
gap: 1rem;
}Prüfen Sie längere Texte, mehrere Zeilen und unterschiedliche Größen der Elemente. Die Haupt- und Querachse hängen von der gewählten Richtung ab. Ein Layout, das mit kurzen Mustertexten funktioniert, kann mit realen Beschriftungen anders umbrechen.
Grid für eine gemeinsame Struktur
Der Container im Beispiel legt Spalten und Zeilen an. Flexible Einheiten verteilen den verfügbaren Platz. Sie ersetzen jedoch keine Prüfung, ob der Inhalt in einer schmalen Ansicht noch lesbar bleibt.
.grid-container {
display: grid;
/* Explizite Spalten */
grid-template-columns: 1fr 2fr 1fr;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: minmax(200px, 1fr) 3fr;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* Explizite Zeilen */
grid-template-rows: auto 1fr auto;
/* Abstand */
gap: 1.5rem;
row-gap: 1rem;
column-gap: 2rem;
/* Benannte Bereiche */
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
}Unterelemente an vorhandenen Spalten ausrichten
Subgrid kann vorhandene Spalten für untergeordnete Elemente nutzbar machen. Prüfen Sie die Unterstützung in den Browsern, die Ihre Anwendung tatsächlich bedienen muss. Das Beispiel zeigt die Struktur einer gemeinsamen Ausrichtung.
/* Kind-Elemente am Parent-Grid ausrichten */
.parent-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.child-grid {
display: grid;
grid-column: span 3;
grid-template-columns: subgrid; /* Erbt Parent-Spalten */
gap: 1rem;
}
/* Nützlich für Formulare */
.form-grid {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 1rem;
}
.form-row {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
align-items: center;
}Die Reihenfolge für Leser und Tastatur erhalten
Eine visuelle Umordnung ändert nicht automatisch die Reihenfolge im Dokument. Halten Sie die logische Lesereihenfolge deshalb im HTML fest. Prüfen Sie den Weg mit der Tastatur und bei vergrößerter Schrift, besonders bei Navigation und Formularen.
Für eine Seite können Sie Grid als äußere Struktur und Flexbox innerhalb einzelner Karten verwenden. Wählen Sie Umbruch und Mindestbreiten anhand der tatsächlichen Inhalte. Testen Sie schmale sowie breite Ansichten und prüfen Sie, ob lange Wörter oder Medien einen horizontalen Überlauf verursachen.
Die Beispiele dienen zum Verständnis der Eigenschaften. Sie sind kein fertiges Designsystem und keine Garantie, dass jede Kombination in Ihrer Anwendung passend ist.
Weiterführende Dokumentation: CSS Grid.
Weiterführende Dokumentation: Flexbox.