Box-Ausrichtung im Grid-Layout
Das CSS box alignment-Modul beschreibt, wie die Ausrichtung in verschiedenen Layout-Methoden funktioniert. Auf dieser Seite untersuchen wir, wie die Box-Ausrichtung im Kontext von CSS grid layout funktioniert.
Da dieser Leitfaden darauf abzielt, spezifische Dinge zu CSS-Grid-Layout und Box-Ausrichtung zu erläutern, sollte er zusammen mit dem Überblick zur Box-Ausrichtung gelesen werden, der allgemeine Funktionen der Box-Ausrichtung für verschiedene Layout-Methoden beschreibt.
Einfaches Beispiel
In diesem Beispiel mit grid layout gibt es nach dem Anordnen der festen Breiten-Tracks auf der Inline-Hauptachse zusätzlichen Platz im grid container. Dieser Platz wird mit justify-content verteilt. Auf der Block-Querachse wird die Ausrichtung der Elemente in ihren Rasterbereichen mit align-items gesteuert. Das erste Element überschreibt den auf die Gruppe gesetzten align-items-Wert, indem es align-self auf center setzt.
Grid-Achsen
Als zweidimensionale Layout-Methode verfügt das Grid-Layout stets über zwei Achsen, auf denen die Elemente ausgerichtet werden können. Alle Box-Ausrichtungseigenschaften stehen zur Verfügung, um dies zu erleichtern.
Die Inline-Achse entspricht der Richtung, in der Wörter in einem Satz im verwendeten Schreibmodus verlaufen. In horizontalen Sprachen wie Englisch oder Arabisch verläuft die Inline-Richtung horizontal. In einem vertikalen Schreibmodus verläuft die Inline-Achse vertikal.
Um Dinge auf der Inline-Achse auszurichten, verwenden Sie Eigenschaften, 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 auf der Seite dargestellt werden — beispielsweise stehen Paragraphen im Englischen vertikal übereinander. Dies ist die Block-Dimension.
Um Dinge auf der Block-Achse auszurichten, verwenden Sie Eigenschaften, die mit align- beginnen: align-content, align-items und align-self.
Selbstausrichtung
Diese Eigenschaften beschäftigen sich mit der Ausrichtung des Elements innerhalb des Bereichs, in dem es platziert wurde:
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 dagegen auf die Grid-Elemente angewendet. Dies bedeutet, dass Sie die Ausrichtung auf alle Grid-Elemente festlegen und dann jedes Element, das eine andere Ausrichtung benötigt, überschreiben können, indem Sie die Eigenschaften align-self oder justify-self in den Regeln für die einzelnen Grid-Elemente verwenden.
Der Anfangswert für align-items und justify-items ist stretch, und der Anfangswert für align-self und justify-self ist auto. Daher wird das Element über das gesamte Grid-Gebiet gestreckt. Eine Ausnahme davon besteht, wenn das Element ein intrinsisches Seitenverhältnis besitzt, 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 beschäftigen sich mit der Ausrichtung der Tracks des Grids, wenn zusätzlicher Platz zu verteilen ist:
Dieses Szenario tritt ein, wenn die von Ihnen definierten Tracks insgesamt weniger als die gesamte Breite des Grid-Containers ausmachen.
Gap- und Legacy-Grid-Gap-Eigenschaften
Diese Eigenschaften definieren den Abstand zwischen Grid-Elementen innerhalb eines Grid-Containers:
Die ursprüngliche Grid-Spezifikation enthielt die Definition der Eigenschaften grid-row-gap, grid-column-gap und grid-gap. Diese wurden inzwischen in die Box-Ausrichtspezifikation verschoben und als Alias für row-gap, column-gap und gap definiert. Dadurch können sie auch für andere Layout-Methoden verwendet werden, bei denen ein Abstand zwischen Elementen sinnvoll ist.