Ausrichtung und Platzierung

justify-items

Mit justify-items richtet man alle Grid-Items horizontal innerhalb ihrer Zellen aus.

Wert	Erklärung
stretch	Standard. Elemente füllen die gesamte Breite
start	Elemente werden links ausgerichtet
end	Elemente werden rechts ausgerichtet
center	Elemente werden horizontal zentriert

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

Alle Boxen werden horizontal in ihren Zellen zentriert.

1

2

3

4

5

6

justify-self

Mit justify-self richtet man ein einzelnes Grid-Item horizontal innerhalb seiner Zelle aus.

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

.box1 {
  justify-self: end;
}

Nur Box 1 wird rechts in ihrer Zelle ausgerichtet, alle anderen Boxen behalten ihr Standardverhalten.

1

2

3

4

5

6

align-items

Mit align-items richtet man alle Grid-Items vertikal innerhalb ihrer Zellen aus.

Wert	Erklärung
stretch	Standard. Elemente füllen die gesamte Höhe
start	Elemente werden oben ausgerichtet
end	Elemente werden unten ausgerichtet
center	Elemente werden vertikal zentriert

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 150px);
  align-items: center;
}

Alle Boxen werden vertikal in ihren Zellen zentriert.

1

2

3

4

5

6

align-self

Mit align-self richtet man ein einzelnes Grid-Item vertikal innerhalb seiner Zelle aus.

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

.box2 {
  align-self: end;
}

Nur Box 2 wird unten in ihrer Zelle ausgerichtet.

1

2

3

4

5

6

place-items

place-items ist eine Kurzschreibweise für align-items und justify-items.

.container {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center; /* Beide Werte auf center */
}

1

Man kann auch unterschiedliche Werte angeben:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  place-items: start end; /* vertikal start, horizontal end */
}

Der erste Wert ist für align-items, der zweite für justify-items.

1

2

3

4

5

6

justify-content

Mit justify-content richtet man das gesamte Grid horizontal innerhalb des Containers aus. Dies ist nur relevant, wenn das Grid kleiner ist als der Container.

Wert	Erklärung
start	Grid wird links ausgerichtet
end	Grid wird rechts ausgerichtet
center	Grid wird horizontal zentriert
space-between	Spalten werden mit Abstand dazwischen verteilt
space-around	Spalten erhalten beidseitig Abstand
space-evenly	Spalten werden gleichmäßig verteilt

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
  width: 100%;
  height: 400px;
  justify-content: center;
}

Das gesamte Grid wird horizontal zentriert.

1

2

3

4

5

6

Bemerkung

Der Unterschied zu justify-items ist wichtig. justify-items richtet die Items innerhalb ihrer Zellen aus, justify-content richtet das gesamte Grid im Container aus.

align-content

Mit align-content richtet man das gesamte Grid vertikal innerhalb des Containers aus. Dies ist nur relevant, wenn das Grid kleiner ist als der Container.

Wert	Erklärung
start	Grid wird oben ausgerichtet
end	Grid wird unten ausgerichtet
center	Grid wird vertikal zentriert
space-between	Zeilen werden mit Abstand dazwischen verteilt
space-around	Zeilen erhalten beidseitig Abstand
space-evenly	Zeilen werden gleichmäßig verteilt

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
  width: 600px;
  height: 400px;
  align-content: center;
}

Das gesamte Grid wird vertikal zentriert.

1

2

3

4

5

6

Bemerkung

Der Unterschied zu align-items ist wichtig. align-items richtet die Items innerhalb ihrer Zellen aus, align-content richtet das gesamte Grid im Container aus.

place-content

Mit place-content richtet man das gesamte Grid innerhalb des Containers aus. Dies ist relevant, wenn das Grid kleiner ist als der Container.

Wert	Erklärung
start	Am Anfang ausrichten
end	Am Ende ausrichten
center	Zentrieren
space-between	Mit Abstand zwischen den Zeilen/Spalten
space-around	Mit Abstand um die Zeilen/Spalten
space-evenly	Gleichmäßig verteilen

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
  height: 500px;
  place-content: center;
}

Das gesamte Grid wird horizontal und vertikal im Container zentriert.

1

2

3

4

5

6

Verschiedene Werte

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
  height: 500px;
  place-content: space-between center; /*align-content justify-content*/
}

1

2

3

4

5

6

Bemerkung

place-content ist die Kurzschreibweise für align-content und justify-content.