Box-Ausrichtung im Grid-Layout
Das CSS Box Alignment Modul beschreibt, wie Ausrichtung in verschiedenen Layout-Methoden funktioniert. Auf dieser Seite untersuchen wir, wie Box-Ausrichtung im Kontext von CSS Grid Layout funktioniert.
Da dieser Leitfaden darauf abzielt, Dinge im Zusammenhang mit CSS Grid Layout und Box-Ausrichtung zu detaillieren, sollte er in Verbindung mit dem Box-Ausrichtungsüberblick Leitfaden gelesen werden, der die gemeinsamen Merkmale der Box-Ausrichtung über Layout-Methoden hinweg beschreibt.
Einfaches Beispiel
In diesem Beispiel unter Verwendung des Grid-Layouts gibt es zusätzlichen Raum im Grid-Container, nachdem die Festbreitentracks auf der inline Hauptachse angelegt wurden. Dieser Raum wird mit 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 align-items
-Wert, der auf die Gruppe gesetzt wurde, indem es align-self
auf center
setzt.
<div class="box">
<div>One</div>
<div>Two</div>
<div>Three <br />has <br />extra <br />text</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
</div>
.box {
display: grid;
grid-template-columns: 120px 120px 120px;
align-items: start;
justify-content: space-between;
border: 2px dotted rgb(96 139 168);
}
.box :first-child {
align-self: center;
}
Grid-Achsen
Als zweidimensionales Layout-Verfahren haben wir beim Arbeiten mit Grid-Layout immer zwei Achsen, auf denen wir unsere Elemente ausrichten können. Wir haben Zugriff auf alle Box-Ausrichtungseigenschaften, 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 Dinge auf der Inline-Achse auszurichten, verwenden Sie die 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 angezeigt werden — zum Beispiel werden Absätze im Englischen nacheinander vertikal angezeigt. Dies ist die Block-Dimension.
Um Dinge auf der Block-Achse auszurichten, verwenden Sie die Eigenschaften, die mit align-
beginnen: align-content
, align-items
und align-self
.
Eigen-Ausrichtung
Diese Eigenschaften behandeln die 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 für alle Grid-Elemente als Gruppe fest. Die *-self
-Eigenschaften, align-self
und justify-self
, werden stattdessen auf Grid-Elemente selbst gesetzt. Dies bedeutet, dass Sie die Ausrichtung auf alle Grid-Elemente einstellen können und dann einzelne Elemente, die eine andere Ausrichtung benötigen, überschreiben können, indem Sie die align-self
oder justify-self
Eigenschaft 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 sich über den gesamten Grid-Bereich erstreckt. 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, damit das Bild nicht verzerrt wird.
Inhaltsausrichtung
Diese Eigenschaften befassen sich mit der Ausrichtung der Tracks des Grids, wenn es zusätzlichen Platz zu verteilen gibt:
Dieses Szenario tritt auf, wenn die von Ihnen definierten Tracks weniger ausmachen als die Gesamtbreite des Grid-Containers.
Lücke und Legacy-Grid-Lücke Eigenschaften
Diese Eigenschaften definieren den Abstand zwischen den Gitterelementen 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 seitdem in die Box-Alignment-Spezifikation verschoben und zu row-gap
, column-gap
, und gap
umbenannt. Dies ermöglicht ihre Verwendung für andere Layout-Methoden, bei denen ein Abstand zwischen Elementen sinnvoll ist.