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? Gerne :-)

HTML: Folgender HTML-Code kann verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>