Box-Ausrichtung im Grid-Layout

Das CSS-Box-Ausrichtungsmodul beschreibt, wie die Ausrichtung in verschiedenen Layout-Methoden funktioniert. Auf dieser Seite untersuchen wir, wie die Box-Ausrichtung im Kontext des CSS-Grid-Layouts funktioniert.

Da dieser Leitfaden darauf abzielt, Dinge zu erläutern, die spezifisch für das CSS-Grid-Layout und die Box-Ausrichtung sind, sollte er zusammen mit dem Übersicht zur Box-Ausrichtung Leitfaden gelesen werden, der die gemeinsamen Merkmale der Box-Ausrichtung über verschiedene Layout-Methoden hinweg beschreibt.

Einfaches Beispiel

In diesem Beispiel mit Grid-Layout gibt es nach dem Anordnen der Festbreiten-Spuren auf der Inline-Hauptachse zusätzlichen Platz im Grid-Container. 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 für die Gruppe gesetzt ist, indem es align-self auf center setzt.

html

<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>

body {
  font-family: sans-serif;
}
.box > * {
  padding: 20px;
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}

css

.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 zweidimensionale Layout-Methode stehen uns beim Arbeiten mit Grid-Layout immer zwei Achsen zur Verfügung, auf denen wir unsere Elemente ausrichten können. Wir haben Zugriff auf alle Eigenschaften der Box-Ausrichtung, um dies zu erreichen.

Die Inline-Achse entspricht der Richtung, in der Wörter in einem Satz im verwendeten Schreibmodus laufen würden. Daher verläuft in einer horizontalen Sprache wie Englisch oder Arabisch die Inline-Richtung horizontal. Sollten Sie sich in einem vertikalen Schreibmodus befinden, verläuft die Inline-Achse vertikal.

Inline-Achsen sind horizontal.

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 — beispielsweise werden Absätze im Englischen vertikal untereinander dargestellt. 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.

Die Block-Achsen sind vertikal.

Selbst-Ausrichtung

Diese Eigenschaften befassen 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 setzen die Ausrichtung für alle Grid-Elemente als Gruppe. Die *-self-Eigenschaften, align-self und justify-self, werden stattdessen auf die Grid-Elemente gesetzt. Dies bedeutet, dass Sie die Ausrichtung auf alle Grid-Elemente festlegen und dann einzelne Elemente überschreiben können, die eine andere Ausrichtung benötigen, 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 erstrecken wird. Die Ausnahme von dieser Regel ist, wenn das Element ein intrinsisches Seitenverhältnis hat, z.B. 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 befassen sich mit der Ausrichtung der Grid-Spuren, wenn zusätzlicher Platz zu verteilen ist:

Dieses Szenario tritt ein, wenn die von Ihnen definierten Spuren insgesamt weniger als die Gesamtbreite des Grid-Containers ausmachen.

Abstand und veraltete Grid-Abstandseigenschaften

Diese Eigenschaften definieren den Abstand zwischen Grid-Elementen innerhalb eines Grid-Containers:

Die Grid-Spezifikation enthielt ursprünglich die Definition der Eigenschaften grid-row-gap, grid-column-gap und grid-gap. Diese wurden inzwischen in die Box-Ausrichtungspezifikation verschoben und zu row-gap, column-gap und gap aliasiert. Dies ermöglicht es ihnen, in anderen Layout-Methoden verwendet zu werden, wo ein Abstand zwischen Elementen sinnvoll ist.