CSS Grid-Container
Die Grid-Einführung machte Eltern zu Gittern. Diese Lektion bleibt beim Container: Tracks definieren, gap setzen, Items in Zellen ausrichten und das Grid packen, wenn Freiraum bleibt. Item-Span und benannte Areas warten auf Grid Items und Grid Areas.
Ein Grid-Container-Werkzeugkasten
📊 Grid-Container auf einen Blick
| Eigenschaft | Alltagsjob |
|---|---|
grid-template-columns |
Definiert Spalten-Track-Größen |
grid-template-rows |
Definiert Zeilen-Track-Größen |
gap |
Zwischenräume zwischen Tracks |
justify-items / align-items |
Richtet jedes Item in seiner Zelle aus (Inline-/Block-Achse) |
justify-content / align-content |
Positioniert das ganze Grid, wenn es kleiner als der Container ist |
grid-auto-flow |
Steuert die Auto-Platzierungsreihenfolge (row oder column) |
Zeichne zuerst die Tracks. Dann entscheide, wie Zellen ihren Inhalt ausrichten — und erst danach, wie übriger Raum um das ganze Grid wirkt.
Template-Tracks — Spalten und Zeilen
grid-template-columns und grid-template-rows skizzieren das Gitter. Mische fr, Längen und repeat() für Alltagboards.
.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr auto;
min-height: 16rem;
}
gap — Zwischenräume ehrlich halten
gap (oder row-gap / column-gap) beabstandet Tracks ohne Margin-Hacks an jedem Kind.
.board {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem 1.25rem;
}
justify-items und align-items — in der Zelle
Diese richten jedes Item in seiner Zelle aus. justify-items auf der Inline-Achse, align-items auf der Block-Achse. Nicht mit Content-Packing verwechseln.
.board {
display: grid;
grid-template-columns: repeat(2, 8rem);
justify-items: center;
align-items: center;
gap: 0.75rem;
}
justify-content und align-content — das Grid packen
Sind die Tracks kleiner als der Container, verschieben oder verteilen Content-Eigenschaften das ganze Grid. Nützlich für Icon-Boards, die nicht ewig strecken sollen.
.board {
display: grid;
grid-template-columns: repeat(3, 6rem);
justify-content: space-between;
align-content: start;
gap: 0.5rem;
min-height: 12rem;
}
Eine ruhige Grid-Container-Gewohnheit
Zuerst Template-Spalten und -Zeilen, dann gap, dann Item-Ausrichtung in Zellen, dann Content-Packing bei Freiraum. Schau bei Bedarf auf grid-auto-flow. Span, Liniennummern und benannte Areas gehören in die nächsten Grid-Lektionen.
.shell {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: auto 1fr;
gap: 1.25rem;
justify-items: stretch;
align-items: stretch;
}
Selbst ausprobieren
- Baue ein Board mit drei
1fr-Spalten undauto 1fr auto-Zeilen. - Füge
gap: 1remhinzu. - Zentriere Zellinhalte mit
justify-itemsundalign-items. - Packe ein Board mit festen Tracks mit
justify-content: space-between. - Notiere eine Eigenschaft für Grid Items oder Grid Areas.
Typische Fehler
justify-items(in Zellen) mitjustify-content(ganzes Grid) verwechseln- Item-
spanoder Area-Namen zu früh am Container setzen - Nur Spalten definieren und sich über zufällige Zeilenhöhen wundern
- Flex-
grow-Gewohnheiten auf den Grid-Container übertragen - Diese Lektion als ganzes Areas-Modul behandeln
Zusammenfassung
- Grid-Container-Props definieren Tracks, Gutters und Ausrichtung
grid-template-columns/rowsskizzieren das Gitterjustify-items/align-itemsrichten Inhalt in Zellen ausjustify-content/align-contentpacken das Grid im Freiraum- Item-Span und benannte Areas folgen in späteren Grid-Lektionen
🧠 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