Jede gängige CSS-Grid-Eigenschaft, gruppiert nach dem Ort ihrer Wirkung: der Container, das Element und die Größeneinheiten. Jede Zeile paart die Eigenschaft mit ihren üblichen Werten.
Grid ordnet Elemente zweidimensional an: Zeilen und Spalten gleichzeitig. Setze display: grid auf das Elternelement, definiere Tracks mit grid-template-columns und grid-template-rows und platziere Kinder in Zellen. Nutze Grid für Seiten- und Kartenlayouts; nutze Flexbox für eindimensionale Leisten. Beide lassen sich frei kombinieren.
Nachschlagetabelle · 33 Einträge
CSS GridExplained
33 of 33 rows
Container
grid | inline-grid
Macht das Element zum Grid-Container.
1fr 1fr | repeat(3, 1fr) | 200px 1fr
Definiert die Spalten und ihre Breiten.
auto 1fr auto
Definiert die Zeilen und ihre Höhen.
[main-start] 1fr [main-end]
Benennt Grid-Linien in einem Template und platziert Elemente anhand dieser Namen.
1rem | 8px 16px
Abstand zwischen Zeilen und Spalten.
"header header" "nav main"
Benennt Zellen für eine lesbare Platzierung.
"head head" 64px "nav main" 1fr / 200px 1fr
Setzt Zeilen, Spalten und Areas in einer Kurzschreibweise.
repeat(2, 1fr) / auto-flow 80px
Setzt jede Track-Eigenschaft und grid-auto-flow in einer Deklaration.
minmax(80px, auto)
Setzt die Höhe der Zeilen, die das Template nicht definiert.
120px | minmax(0, 1fr)
Setzt die Breite der Spalten, die das Template nicht definiert.
row | column | row dense
Wählt die Achse für nicht platzierte Elemente; dense füllt früher entstandene Lücken auf.
start | center | end | stretch
Richtet jedes Element innerhalb seiner Zelle entlang der Zeilenachse aus.
start | center | end | stretch
Richtet jedes Element innerhalb seiner Zelle entlang der Spaltenachse aus.
center | start end
Setzt align-items und justify-items in einer Deklaration.
start | center | space-between
Richtet das Track-Raster innerhalb des Containers entlang der Zeilenachse aus.
start | center | space-between
Richtet das Track-Raster innerhalb des Containers entlang der Spaltenachse aus.
center | end start
Setzt align-content und justify-content in einer Deklaration.
Element
1 / 3 | span 2
Platziert ein Element über Spalten oder lässt es diese überspannen.
1 / 2 | span 3
Platziert ein Element über Zeilen oder lässt es diese überspannen.
grid-column: 2 / -1
Zählt Linien vom Ende des Grids her; -1 ist die letzte Linie.
header | 1 / 1 / 2 / 3
Benennt oder platziert ein Element vollständig in einer Kurzschreibweise.
start | center | end | stretch
Richtet genau dieses Element innerhalb seiner Zelle entlang der Zeilenachse aus.
start | center | end | stretch
Richtet genau dieses Element innerhalb seiner Zelle entlang der Spaltenachse aus.
center | start end
Setzt align-self und justify-self in einer Deklaration.
Größeneinheiten
1fr | 2fr
Ein Bruchteil des freien Platzes im Track.
auto | 1fr auto
Misst einen Track nach seinem Inhalt; Ausrichtung kann ihn dehnen.
min-content | max-content
Misst einen Track nach seinem kleinsten oder größten Inhalt.
fit-content(180px)
Misst einen Track nach seinem Inhalt, aber nie über die angegebene Grenze hinaus.
minmax(200px, 1fr)
Begrenzt einen Track zwischen einem Minimum und einem Maximum.
repeat(4, 1fr)
Wiederholt ein Track-Muster, ohne jedes einzeln zu tippen.
repeat(auto-fit, minmax(120px, 1fr))
Fügt so viele Tracks hinzu, wie hineinpassen; auto-fit lässt leere zusammenfallen.
grid-template-columns: subgrid
Lässt ein verschachteltes Grid die Tracks und Linien-Namen des Eltern-Grids teilen.
grid-template-rows: masonry
Experimentell: packt Elemente nach Höhe in Spalten, statt feste Zeilen zu verwenden.