Zentrieren mit Gridlayout

Geschrieben am: 17.2.2017 , aktualisiert: 16.3.2022

Natürlich ist das CSS3-Gridlayout-Modul für komplexe Layoutaufteilungen gedacht, aber manchmal braucht man ja auch banale Dinge – wie beispielsweise eine horizontale und vertikale Zentrierung.

Bei Gridlayout stehen für die Zentrierung die Angaben align-content, justify-content sowie align-items und justify-items zur Auswahl. Was aber ist genau der Unterschied zwischen diesen Angaben? Und wie zentriert man jetzt am besten beim Einsatz vom CSS3-Gridlayout?

Gehen wir von einem Element mit der Klasse .zentriert aus, das innerhalb von body steht:

<body>
  <div class="zentriert">
    Zentriert :-)
  </div>
</body>

Zentrieren mit *-content

Mit Gridlayout gelingt die Zentrierung mithilfe ein paar Zeilen Code. Wir machen das body-Element zum Gridcontainer und spezifizieren die Ausrichtung mithilfe von align-content und justify-content:

body { 
  display: grid; 
  align-content: center; 
  justify-content: center; 
}

Das wars – das Element ist damit zentriert.

Beispiel zum Ausprobieren: http://www.maurice-web.de/blogbeispiele/gridlayout/grid_zentrieren.html

Zentriert mit Gridlayout

Zentrieren mit *-items

Eine Zentrierung ist ebenfalls möglich durch folgende Angaben:

body { 
  display: grid; 
  align-items: center; 
  justify-items: center; 
}

Der Unterschied zwischen beiden: Durch die *-content-Varianten zentriert man den Rasterbereich als Ganzes. Mit den *-items-Eigenschaften zentriert man hingegen Elemente innerhalb eines Rasterbereichs. In unserem Spezialfall haben wir ein Raster mit genau einem Rasterelement und da macht es keinen Unterschied, welche Variante ich wähle.

Zentrieren mit align-items und justify-items: http://www.maurice-web.de/blogbeispiele/gridlayout/grid_zentrieren_b.html

Mehrere Elemente zentrieren

Ändern wir das Beispiel einmal ab: Wir wollen drei Elemente, die zentriert werden sollen.

<body> 
  <div class="zentriert">
    Zentriert :-)</div> 
  <div class="zentriert">
    Zentriert :-)</div>
  <div class="zentriert">
    Zentriert :-)</div> 
</body>

Jetzt klappt es mit den Angaben:

body { 
  display: grid; 
  align-content: center; 
  justify-content: center; 
}

http://www.maurice-web.de/blogbeispiele/gridlayout/grid_zentrieren_2.html

Wenn man hingegen die Zentrierung mit *-items versucht, werden nur die Inhalte in den Rasterzellen zentriert.

http://www.maurice-web.de/blogbeispiele/gridlayout/grid_zentrieren_2b.html

(Die Rasterlinien, die im Screenshot zu sehen sind, kann man sich in der Developer Edition von Firefox anzeigen lassen).

Mehrere nebeneinander befindliche Elemente zentrieren

Bisher wurden mehrere Elemente untereinander dargestellt. Für dieses Phänomen ist die Eigenschaft grid-auto-flow zuständig, die standardmäßig den Wert row hat – deswegen werden unsere Elemente untereinander dargestellt. Wenn wir hingegen

grid-auto-flow: column;

beim Gridcontainer ergänzen, sind die Elemente nebeneinander.

http://www.maurice-web.de/blogbeispiele/gridlayout/grid_zentrieren_3.html

Wieder kann man gut sehen, welche andere Zentrierung durch justify-items und align-items erreicht wird. Hier werden nur die Inhalte innerhalb der Rasterzellen zentriert.

http://www.maurice-web.de/blogbeispiele/gridlayout/grid_zentrieren_3b.html

Florence Maurice