Skip to content

CSS Grid Layout Spickzettel

Diese Seite bietet einen visuellen Spickzettel für das CSS Grid Layout, einschließlich der Kern-Eigenschaften für Grid-Container und Grid-Elemente sowie praktischer Layout-Beispiele.

Grid-Container

Eigenschaft Wert Beschreibung
display grid Definiert das Element als Grid-Container
grid-template-columns 100px 1fr Definiert die Breite der Spalten
grid-template-rows 100px 1fr Definiert die Höhe der Zeilen
grid-template-areas header header
sidebar main
footer footer		 Definiert das Gitter durch Benennung von Bereichen
grid-column-gap 10px Definiert die Lücke zwischen den Spalten
grid-row-gap 10px Definiert die Lücke zwischen den Zeilen
grid-gap 10px 20px Definiert gleichzeitig die Lücken zwischen Zeilen und Spalten
justify-items start Richtet Rasterelemente horizontal innerhalb von Rasterzellen aus
align-items start Richtet Rasterelemente vertikal innerhalb von Rasterzellen aus
justify-content start Richtet das gesamte Gitter horizontal innerhalb des Gitter-Containers aus
align-content start Richtet das gesamte Gitter vertikal innerhalb des Gitter-Containers aus

Rasterelemente (Grid Items)

Eigenschaft Wert Beschreibung
grid-column 1 / 3 Definiert die von einem Element belegten Spalten
grid-row 1 / 3 Definiert die von einem Element belegten Zeilen
grid-area header Platziert Rasterelemente durch Benennung von Bereichen
justify-self start Richtet ein einzelnes Rasterelement horizontal innerhalb seiner Zelle aus
align-self start Richtet ein einzelnes Rasterelement vertikal innerhalb seiner Zelle aus
grid-column-start 1 Definiert die Startlinie der Spalte
grid-column-end 3 Definiert die Endlinie der Spalte
grid-row-start 1 Definiert die Startlinie der Zeile
grid-row-end 3 Definiert die Endlinie der Zeile

Media-Query-Beispiel 

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Weitere Beispiele

Zwei-Spalten-Layout 

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

Drei-Spalten-Layout 

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Vertikale Zentrierung 

.container {
  display: grid;
  align-items: center;
}

Horizontale Zentrierung 

.container {
  display: grid;
  justify-items: center;
}