CSS-Gridlayout ausrichten mit align-content, justify-content, align-items und justify-items

Ich beschäftige mich gerade genauer mit dem CSS3-Gridlayout. Dort kann man Elemente über vier Eigenschaften ausrichten: align-content, justify-content, align-items und justify-items. Um mir besser zu merken, was genau wie wirkt, habe ich mir einen kleinen Spickzettel gebastelt.

Er zeigt jeweils nur zwei der möglichen Angaben hinter den Eigenschaften – aber man sieht deutlich, was involviert ist:

  • align-content: Ausrichtung des Rasters als Ganzes, vertikal
  • justify-content: Ausrichtung des Rasters als Ganzes, horizontal
  • align-items: Ausrichtung der Rasterinhalte in ihren Rasterelementen, vertikal
  • justify-items: Ausrichtung der Rasterinhalte in ihren Rasterelementen, horizontal

Deutlicher wirds mit einem Bild.

Spickzettel Ausrichtung Gridlayout

Die für die Screenshots verwendeten Listings:

Ausrichtung mit align-content und justify-content

Ausrichtung mit align-items und justify-items

(Bei den Screenshots für *-align habe ich zur Verdeutlichung ein Raster eingeblendet).

 

 

Kommentare sind geschlossen.