Box-Ausrichtung im Grid-Layout
Das CSS Box-Ausrichtungsmodul beschreibt, wie die Ausrichtung in verschiedenen Layout-Methoden funktioniert. Auf dieser Seite wird erklärt, wie die Box-Ausrichtung im Kontext des CSS Grid-Layouts funktioniert.
Da dieser Leitfaden speziell auf CSS Grid-Layout und Box-Ausrichtung eingeht, sollte er zusammen mit dem Box-Ausrichtungs-Leitfaden gelesen werden, der die gemeinsamen Merkmale der Box-Ausrichtung über verschiedene Layout-Methoden erklärt.
Einfaches Beispiel
In diesem Beispiel mit Grid-Layout gibt es zusätzlichen Platz im Grid-Container, nachdem die fixierten Breiten-Tracks entlang der Inline-Hauptachse angeordnet wurden. Dieser Platz wird mithilfe von justify-content verteilt. Auf der Block-Querachse wird die Ausrichtung der Elemente innerhalb ihrer Grid-Bereiche mit align-items gesteuert. Das erste Element überschreibt den Wert von align-items, der für die Gruppe festgelegt wurde, indem align-self auf center gesetzt wird.
Grid-Achsen
Als zweidimensionale Layout-Methode haben wir beim Arbeiten mit Grid-Layout immer zwei Achsen, entlang derer wir unsere Elemente ausrichten können. Wir haben Zugriff auf alle Box-Ausrichtungs-Properties, um dies zu erreichen.
Die Inline-Achse entspricht der Richtung, in der Wörter in einem Satz im verwendeten Schreibmodus laufen würden. In einer horizontalen Sprache wie Englisch oder Arabisch verläuft die Inline-Richtung horizontal. Sollten Sie sich in einem vertikalen Schreibmodus befinden, verläuft die Inline-Achse vertikal.
Um Elemente auf der Inline-Achse auszurichten, verwenden Sie die Properties, die mit justify- beginnen: justify-content, justify-items und justify-self.
Die Block-Achse kreuzt die Inline-Achse in der Richtung, in der Blöcke dargestellt werden – beispielsweise werden Absätze im Englischen vertikal untereinander angezeigt. Dies ist die Block-Dimension.
Um Elemente auf der Block-Achse auszurichten, verwenden Sie die Properties, die mit align- beginnen: align-content, align-items und align-self.
Eigen-Ausrichtung
Diese Eigenschaften beschäftigen sich mit der Ausrichtung des Elements innerhalb des Grid-Bereichs, in den es platziert wird:
Die *-items-Eigenschaften, align-items und justify-items, werden auf den Grid-Container angewendet und legen die Ausrichtung aller Grid-Elemente als Gruppe fest. Die *-self-Eigenschaften, align-self und justify-self, werden stattdessen auf Grid-Elemente gesetzt. Das bedeutet, dass Sie die Ausrichtung auf alle Grid-Elemente festlegen und dann alle Elemente, die eine andere Ausrichtung benötigen, überschreiben können, indem Sie die Eigenschaft align-self oder justify-self auf die Regeln für die einzelnen Grid-Elemente anwenden.
Der Anfangswert für align-items und justify-items ist stretch, und der Anfangswert für align-self und justify-self ist auto, sodass das Element den gesamten Grid-Bereich einnimmt. Die Ausnahme von dieser Regel ist, wenn das Element ein intrinsisches Seitenverhältnis hat, zum Beispiel ein Bild. In diesem Fall wird das Element in beiden Dimensionen auf start ausgerichtet, um zu verhindern, dass das Bild verzerrt wird.
Inhaltsausrichtung
Diese Eigenschaften kontrollieren die Ausrichtung der Tracks des Grids, wenn zusätzlicher Platz zum Verteilen vorhanden ist:
Dieses Szenario tritt ein, wenn die von Ihnen definierten Tracks insgesamt geringer sind als die gesamte Breite des Grid-Containers.
Abstand und veraltete grid-gap Eigenschaften
Diese Eigenschaften definieren den Abstand zwischen Grid-Elementen innerhalb eines Grid-Containers:
Die Grid-Spezifikation enthielt ursprünglich die Definition für die Eigenschaften grid-row-gap, grid-column-gap und grid-gap. Diese wurden inzwischen in die Box-Ausrichtungs-Spezifikation verschoben und auf row-gap, column-gap und gap aliasiert. Dies erlaubt ihre Verwendung für andere Layout-Methoden, bei denen ein Abstand zwischen den Elementen sinnvoll ist.