Verständnis für das Justify-Selbst, Justify-items und Justify-Incontent in CSS Grid

Ihre Verwirrung in Bezug auf die Ähnlichkeiten und Unterschiede zwischen diesen drei Eigenschaften sind verständlich, da sich die Dokumentation häufig eher auf Flex-Box als auf Gitter konzentriert. Um zu verdeutlichen:

1. Beziehung zwischen Flex-Box- und Grid-Eigenschaften

Das Justify- und Justify-item-Eigenschaften werden in Flex-Box nicht implementiert. Diese Unterscheidung ergibt sich aus der eindimensionalen Natur von Flex-Box, was die Rechtfertigung eines einzelnen Elements unmöglich macht. Daher stützt sich Flex-Box auf die Eigenschaft Justify-Incontent für die Ausrichtung entlang der Hauptachse.

2. Rollen von Justify-Selbst, Justify-Items und Justify-Content

• justify-content : richtet das gesamte Raster entlang der Zeilenachse aus. Diese Eigenschaft kontrolliert den Abstand zwischen Rasterelementen in horizontaler Richtung.
• justify-items : stimmt den Inhalt in einzelnen Rasterelementen entlang der Zeilenachse aus. Es wirkt sich auf die Ausrichtung von Inhalten in den Gitterzellen aus.
• Justify-Self : Richtig, das aktuelle Rasterelement in seiner übergeordneten Gitterzelle entlang der Zeilenachse ausrichtet. Diese Eigenschaft passt individuell die Ausrichtung bestimmter Rasterelemente an.

3. Schlüsselunterschiede

Die folgende visuelle Hilfe liefert eine klare Demonstration der Unterscheidungen zwischen diesen Eigenschaften:

[Bild des Gitterlayouts mit unterschiedlichen Alignments von Inhalten, Gitterelementen und Grid selbst]

Zusätzliche Ressourcen

finden Sie für weitere Erkenntnisse auf folgende Artikel:

• https://developer.mozilla.org/en-us/docs/web/css/css_grid_layout/box_alignment_in_css_gr id_layout
• https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/