CSS-Gridlayout ausrichten mit align-content, justify-content, align-items und justify-items
Geschrieben am:
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, vertikaljustify-content: Ausrichtung des Rasters als Ganzes, horizontalalign-items: Ausrichtung der Rasterinhalte in ihren Rasterelementen, vertikaljustify-items: Ausrichtung der Rasterinhalte in ihren Rasterelementen, horizontal
Deutlicher wirds mit einem Bild.
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).