SS Toolbox
Alle Daten werden lokal verarbeitet

CSS Grid Align & Justify Demo

Visualisieren Sie Gitterzellengrenzen, um klar zu sehen, wie sich Kindelemente in jeder Zelle positionieren

Kontrollfeld

Passen Sie vier Ausrichtungseigenschaften an, um verschiedene Ebenen von Ausrichtungseffekten zu beobachten

Vertikale Ausrichtung innerhalb der Zellen

Horizontale Ausrichtung innerhalb der Zellen

Vertikale Ausrichtung des gesamten Gitters

Horizontale Ausrichtung des gesamten Gitters

Aktuelle Einstellungen: align-items: center | justify-items: center | align-content: center | justify-content: center

Gitter-Demo-Bereich

3x3-Gitter mit zusätzlichem Container-Platz zur Demonstration von Inhaltsausrichtungseffekten

A
B
C
D
E
F
G
H
I

Eigenschaftserklärungen

Items-Eigenschaften (Ausrichtung innerhalb der Zellen)

Align Items (Vertikal)

  • start - Kindelemente oben in der Zelle ausrichten
  • center - Kindelemente vertikal zentrieren
  • end - Kindelemente unten in der Zelle ausrichten
  • stretch - Kindelemente strecken, um die Zellenhöhe zu füllen

Justify Items (Horizontal)

  • start - Kindelemente links in der Zelle ausrichten
  • center - Kindelemente horizontal zentrieren
  • end - Kindelemente rechts in der Zelle ausrichten
  • stretch - Kindelemente strecken, um die Zellenbreite zu füllen

Content-Eigenschaften (Ausrichtung des gesamten Gitters)

Align Content (Vertikal)

  • start - Gitter oben im Container ausrichten
  • center - Gitter vertikal zentrieren
  • end - Gitter unten im Container ausrichten
  • space-* - Platz zwischen Gitterzeilen verteilen

Justify Content (Horizontal)

  • start - Gitter links im Container ausrichten
  • center - Gitter horizontal zentrieren
  • end - Gitter rechts im Container ausrichten
  • space-* - Platz zwischen Gitterspalten verteilen
Verwandte Tools

CSS Flexbox lernen

Interaktives CSS Flexbox-Lerntool mit visuellen Demonstrationen

CSS Grid lernen

Interaktives CSS Grid-Lerntool mit visuellen Demonstrationen

All Tools →

Explore all tools