Lädt...

CSS Grid-Items

Grid Container steuerte den Parent — Tracks, gap und Zell-Defaults. Grid-Items stellen eine andere Frage: Wie beansprucht jedes Kind Linien, spannt Tracks und überschreibt die Ausrichtung in seiner Zelle? Beherrsche Linienplatzierung, bevor benannte Areas kommen.

Ein Grid-Items-Werkzeugkasten

📊 Grid-Items auf einen Blick

Eigenschaft	Alltagsjob
`grid-column`	Setzt Spalten-Start-/Endlinien des Items (Kurzform)
`grid-row`	Setzt Zeilen-Start-/Endlinien des Items (Kurzform)
`span`	Streckt ein Item über N Tracks ab der Startlinie
`justify-self`	Überschreibt `justify-items` für ein Item (Inline-Achse)
`align-self`	Überschreibt `align-items` für ein Item (Block-Achse)
`place-self`	Kurzform für `align-self` + `justify-self`

Grid-Linien werden vom Start-Rand nummeriert. Ein Item von Linie 1 bis Linie 3 deckt zwei Spalten-Tracks ab. Denk zuerst in Linien; benannte Areas kommen später.

grid-column — auf Spaltenlinien setzen

grid-column: start / end pinnt ein Kind zwischen Spaltenlinien. Eine Sidebar sitzt oft auf dem ersten Track, das Hauptpanel nimmt den Rest.

Sidebar auf Spaltenlinien

css

.board {
display: grid;
grid-template-columns: 14rem 1fr;
gap: 1rem;
}

.board__aside {
grid-column: 1 / 2;
}

.board__main {
grid-column: 2 / 3;
}

span — über Tracks strecken

span zählt Tracks ab der Startlinie. Ein Hero über die volle Breite nutzt auf einem Drei-Spalten-Board oft grid-column: 1 / span 3.

Hero spannt drei Spalten

css

.hero {
grid-column: 1 / span 3;
}

grid-row — auf Zeilenlinien setzen

Dieselbe Idee auf der Block-Achse. Pinne ein Banner in die obere Bahn, oder lass eine hohe Karte mit span zwei Zeilen-Tracks belegen.

Banner auf Zeilenlinien

css

.banner {
grid-row: 1 / 2;
}

.tall-card {
grid-row: 2 / span 2;
}

Spalte und Zeile zusammen

Kombiniere beides, wenn ein Kind ein klares Rechteck braucht — etwa eine Feature-Kachel über zwei Spalten und eine Zeile.

Feature-Kachel mit span

css

.feature {
grid-column: 1 / span 2;
grid-row: 1 / 2;
}

place-self — ein Item, andere Zellausrichtung

Überschreibe justify-items / align-items des Containers für ein einzelnes Kind. place-self: center ist eine ruhige Kurzform, wenn beide Achsen passen sollen.

Place-self-Override

css

.board {
display: grid;
justify-items: stretch;
align-items: stretch;
gap: 0.75rem;
}

.board .badge {
place-self: center;
}

Eine ruhige Grid-Item-Gewohnheit

Zuerst mit Spalten- und Zeilenlinien platzieren, span nutzen wenn ein Kind mehrere Tracks braucht, dann Einzelausrichtung mit place-self feilen. Halte die DOM-Reihenfolge sinnvoll — vermeide order-Tricks, die den Tastaturfokus durcheinanderbringen. Benannte Template-Areas gehören in Grid Areas.

Benannte Item-Rollen

css

.shell__hero {
grid-column: 1 / -1;
}

.shell__aside {
grid-column: 1 / 2;
align-self: start;
}

.shell__main {
grid-column: 2 / 3;
}

Selbst ausprobieren

Baue ein Zwei-Spalten-Board; setze aside auf grid-column: 1 / 2 und main auf 2 / 3.
Füge einen Drei-Spalten-Hero mit grid-column: 1 / span 3 hinzu.
Pinne ein Banner mit grid-row: 1 / 2.
Spanne eine Feature-Kachel über zwei Spalten und eine Zeile.
Zentriere ein Badge mit place-self: center und notiere benannte Areas für später.

Typische Fehler

span oder Liniennummern auf den Container statt auf ein Item setzen
Vergessen, dass Linien bei 1 beginnen, und Tracks wie Linien zählen
Item-Platzierung mit justify-content-Packing am Parent vermischen
Zu früh zu benannten grid-template-areas springen
Mit order optisch umsortieren und Tab-/Quellreihenfolge brechen

Zusammenfassung

Grid-Items steuern Linienplatzierung, Spannen und pro-Item-Ausrichtung
grid-column / grid-row pinnen Start- und Endlinien
span streckt ab einer Startlinie über Tracks
place-self (und Self-Props) überschreiben die Zellausrichtung für ein Kind
Benannte Template-Areas kommen in der nächsten Lektion Grid Areas

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓

Fragen

🎯

70%

Zum Bestehen

♾️

∞

Zeit

🔄

∞

Versuche

📝 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

Sprache