Ausrichtung von Elementen im CSS-Grid-Layout

CSS-Grid-Layout implementiert die CSS Box Alignment, die denselben Standard verwendet wie Flexbox zur Ausrichtung der Elemente in ihrem Flex-Container. Das Alignment-Modul beschreibt im Detail, wie Ausrichtungen in allen Layout-Methoden funktionieren.

In diesem Leitfaden schauen wir uns an, wie die Eigenschaften der Box-Ausrichtung verwendet werden, um Elemente im Grid-Layout auszurichten.

Sie werden Ähnlichkeiten bemerken, wie diese Eigenschaften und Werte in Flexbox funktionieren. Da Grids zweidimensional und Flexbox eindimensional sind, gibt es einige kleine Unterschiede, die Sie beachten sollten. Aus diesem Grund beginnen wir damit, die beiden Achsen zu betrachten, mit denen wir Elemente in einem Grid ausrichten.

Die beiden Achsen eines Grid-Layouts

Beim Arbeiten mit einem Grid-Layout haben Sie zwei Achsen, an denen Dinge ausgerichtet werden können – die Block-Achse und die Inline-Achse. Die Block-Achse ist die Achse, entlang derer Blöcke im Block-Layout ausgerichtet werden. Wenn Sie zwei Absätze auf Ihrer Seite haben, erscheinen diese untereinander, und diese Richtung bezeichnen wir als die Block-Achse.

Block-Achsen sind vertikal.

Die Inline-Achse verläuft quer zur Block-Achse und entspricht der Richtung, in der Text im regulären Inline-Fluss verläuft.

Inline-Achsen / Zeilen-Achsen sind horizontal.

Wir können den Inhalt innerhalb der Grid-Bereiche und die Grid-Tracks selbst entlang dieser beiden Achsen ausrichten.

Ausrichten von Elementen auf der Block-Achse

Die Eigenschaften align-self und align-items steuern die Ausrichtung auf der Block-Achse. Wenn wir diese Eigenschaften verwenden, ändern wir die Ausrichtung des Elements innerhalb des Grid-Bereichs, in dem Sie es platziert haben.

Verwendung von align-items

Im folgenden Beispiel haben wir vier Grid-Bereiche innerhalb unseres Grids. Wir können die Eigenschaft align-items auf den Grid-Container anwenden, um die Elemente mithilfe von normal, stretch, oder <self-position>- oder <baseline-position>-Werten auszurichten:

  • normal
  • stretch
  • start
  • end
  • center
  • baseline
  • first baseline
  • last baseline
  • auto (nur align-self)

Der Standardwert ist normal, was für Grid-Container auf stretch aufgelöst wird.

css
.wrapper {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  grid-auto-rows: 100px;
  grid-template-areas:
    "a a a a b b b b"
    "a a a a b b b b"
    "c c c c d d d d"
    "c c c c d d d d";
  align-items: start;
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}
html
<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

Beachten Sie, dass, sobald Sie align-items: start setzen, die Höhe jedes untergeordneten <div> vom Inhalt des <div> bestimmt wird. Im Gegensatz dazu wird bei komplettem Weglassen von align-items die Höhe jedes <div> gedehnt, um seinen Grid-Bereich auszufüllen.

Die Eigenschaft align-items setzt die Eigenschaft align-self für alle untergeordneten Grid-Elemente. Das bedeutet, dass Sie die Eigenschaft auch individuell für jedes Grid-Element mit align-self festlegen können.

Verwendung von align-self

Im nächsten Beispiel verwenden wir die Eigenschaft align-self, um die verschiedenen Ausrichtungswerte zu demonstrieren. Der erste Bereich zeigt das Standardverhalten von align-self, das in diesem Fall auf stretch aufgelöst wird. Das zweite Element hat den Wert align-self: start, das dritte end und das vierte center.

css
.wrapper {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  grid-auto-rows: 100px;
  grid-template-areas:
    "a a a a b b b b"
    "a a a a b b b b"
    "c c c c d d d d"
    "c c c c d d d d";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
  align-self: start;
}
.item3 {
  grid-area: c;
  align-self: end;
}
.item4 {
  grid-area: d;
  align-self: center;
}
html
<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

Elemente mit einem intrinsischen Seitenverhältnis

Das Standardverhalten für align-self ist, vom align-items-Wert des Grid-Containers zu erben, wobei der Standardwert normal auf Dehnen (stretch) resolviert – außer bei Elementen mit einem intrinsischen Seitenverhältnis. In diesem Fall verhalten sie sich wie start. Der Grund dafür ist, dass Elemente mit einem Seitenverhältnis bei Dehnen verzerrt würden.

Ausrichten von Elementen auf der Inline-Achse

Während align-items und align-self Elemente auf der Block-Achse ausrichten, richten justify-items und justify-self Elemente auf der Inline-Achse aus. Die Werte, die Sie auswählen können, sind ähnlich wie bei den Werten für align-self: normal, stretch, <self-position> und <baseline-position>, sowie left und right. Zu den möglichen Werten gehören:

  • normal
  • start
  • end
  • left
  • right
  • center
  • stretch
  • baseline
  • first baseline
  • last baseline
  • auto (nur justify-self)

Das untenstehende Beispiel, das bereits bei align-items verwendet wurde, zeigt dieses Mal die Anwendung der Eigenschaft justify-self.

Erneut ist der Standardwert stretch, außer bei Elementen mit einem intrinsischen Seitenverhältnis. Das bedeutet, dass Grid-Elemente standardmäßig ihren Grid-Bereich ausfüllen, es sei denn, Sie ändern die Ausrichtung. In diesem Beispiel zeigt das erste Element den standardmäßigen stretch-Ausrichtungswert:

css
.wrapper {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  grid-auto-rows: 100px;
  grid-template-areas:
    "a a a a b b b b"
    "a a a a b b b b"
    "c c c c d d d d"
    "c c c c d d d d";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
  justify-self: start;
}
.item3 {
  grid-area: c;
  justify-self: end;
}
.item4 {
  grid-area: d;
  justify-self: center;
}
html
<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

Wie bei align-self und align-items können Sie justify-items auf den Grid-Container anwenden, um einen justify-self-Wert für alle Grid-Elemente innerhalb des Containers einzustellen.

Hinweis: Die Eigenschaften justify-self und justify-items sind in Flexbox nicht implementiert. Dies liegt an der eindimensionalen Natur von Flexbox, bei der es mehrere Elemente entlang der Achse geben kann, was es unmöglich macht, ein einziges Element zu rechtfertigen. Um Elemente entlang der Haupt- und Inline-Achse in Flexbox auszurichten, verwenden Sie die Eigenschaft justify-content.

Kurzschreibweisen

Die Eigenschaft place-items ist eine Kurzschreibweise für align-items und justify-items.

Die Eigenschaft place-self ist eine Kurzschreibweise für align-self und justify-self.

Ein Element im Bereich zentrieren

Indem wir die Eigenschaften zur Ausrichtung und zum Justieren kombinieren, können wir ein Element leicht innerhalb eines Grid-Bereichs zentrieren.

css
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas:
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}
html
<div class="wrapper">
  <div class="item1">Item 1</div>
</div>

Ausrichtung der Grid-Tracks auf der Block-Achse

Wenn Ihre Grid-Tracks einen Bereich nutzen, der kleiner ist als der Grid-Container, können Sie die Grid-Tracks selbst innerhalb dieses Containers ausrichten. Die Eigenschaft align-content richtet die Tracks auf der Block-Achse aus, und justify-content richtet sie auf der Inline-Achse aus. Wie bei den Eigenschaften *-items und *-item ist die Eigenschaft place-content eine Kurzschreibweise für align-content und justify-content.

Die Werte für align-content, justify-content und place-content beinhalten alle <content-distribution>- und <content-position>-Werte. Die Eigenschaft align-content akzeptiert auch <baseline-position>-Werte, und wie die anderen justify-*-Eigenschaften akzeptiert justify-content ebenfalls left und right.

Gültige Schlüsselwörter für place-content sind:

  • normal
  • start
  • end
  • center
  • stretch
  • space-around
  • space-between
  • space-evenly
  • baseline
  • first baseline
  • last baseline
  • left
  • right

Die Eigenschaft align-content wird auf den Grid-Container angewendet, da sie für das gesamte Grid funktioniert.

Standardausrichtung

In diesem Beispiel hat der 500px x 500px große Grid-Container drei Reihen und drei Spalten mit 100px-Grid-Tracks und einer 10px-Rinne. Das bedeutet, es gibt Platz innerhalb des Grid-Containers in beiden Richtungen.

Standardmäßig befinden sich die Grid-Tracks in der oberen linken Ecke des Grids, ausgerichtet an den Startlinien des Grids, da das Standardverhalten im Grid-Layout start ist:

css
* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  height: 500px;
  width: 500px;
  gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}
html
<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

Einstellung von align-content: end

Mit demselben CSS und HTML fügen wir in diesem Beispiel align-content mit dem Wert end zum Container hinzu, wodurch die Tracks alle zur Endlinie des Grid-Containers in der Block-Dimension verschoben werden:

css
.wrapper {
  align-content: end;
}

Einstellung von align-content: space-between

Wir können auch die <content-distribution>-Werte zur Verteilung des Raumes anwenden, wie space-between, space-around, space-evenly und stretch. In diesem Beispiel setzen wir align-content, um die Tracks auf der Block-Achse mit space-between auszurichten, was die Tracks verteilt:

css
.wrapper {
  align-content: space-between;
}

Wenn ein Element mehr als eine Grid-Track überspannt, wird die Nutzung eines Raumverteilung-Werts wahrscheinlich dazu führen, dass Elemente in Ihrem Grid größer werden, da der zwischen den Tracks hinzugefügte Raum auf das überspannende Element verteilt wird. Daher stellen Sie sicher, dass der Inhalt der Tracks den zusätzlichen Raum aufnehmen kann oder dass Sie Ausrichtungseigenschaften auf die Elemente anwenden, sodass sie sich zum Start oder Endpunkt und nicht zu stretch verschieben.

Im untenstehenden Bild haben wir das Grid mit zwei verschiedenen align-content-Werten positioniert, um start und space-between zu vergleichen. Sie können sehen, wie die ersten beiden Elemente, die zwei Grid-Tracks überspannen, in der space-between-Darstellung zusätzliche Höhe erhalten, da sie den Raum übernehmen, der zwischen den drei Reihen verteilt wurde:

Demonstration, wie Elemente größer werden, wenn wir space-between nutzen.

Justierung der Grid-Tracks auf der Inline-Achse

Wir können justify-content nutzen, um dieselbe Art der Ausrichtung auf der Inline-Achse durchzuführen, die wir mit align-content auf der Block-Achse nutzten.

Mit demselben Beispiel setzen wir justify-content auf space-around. Auch hier führt dies dazu, dass Tracks, die mehr als einen Spalten-Track überspannen, zusätzlichen Raum erhalten:

css
.wrapper {
  align-content: space-between;
  justify-content: space-around;
}

Ausrichtung und automatische Abstände

Eine weitere Möglichkeit, Elemente innerhalb ihres Bereichs auszurichten, ist die Verwendung von automatischen Abständen. Wenn Sie jemals ein Layout in der Ansicht zentriert haben oder ein Block-Element innerhalb seines Elternteils, haben Sie möglicherweise die rechten und linken margin-Eigenschaften des Elements, das Sie zentrieren möchten, auf auto gesetzt. Die automatische Margin absorbiert den gesamten verfügbaren Raum. Indem Sie die Margin auf beiden Seiten auf auto setzen, wird das Block-Level-Element in die Mitte verschoben, da beide Margins versuchen, den gesamten Platz einzunehmen.

Im nächsten Beispiel hat das Element 1 seine margin-left-Eigenschaft auf auto gesetzt. Dies verschiebt den Inhalt auf die rechte Seite des Bereichs, da die automatische Margin den verfügbaren Platz einnimmt, der nach Zuweisung des für den Inhalt erforderlichen Platzes übrig bleibt:

css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  height: 500px;
  width: 500px;
  gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
}
.item1 {
  grid-area: a;
  margin-left: auto;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}
html
<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

Verwenden Sie den Grid-Inspektor in den Entwicklertools Ihres Browsers, um zu sehen, wie das Element ausgerichtet ist:

Bild zeigt automatische Margins im Firefox-Grid-Highlighter.

Ausrichtung und Schreibmodi

All diese Beispiele wurden in Englisch, einer von links nach rechts geschriebenen Sprache, dargestellt. Das bedeutet, dass unsere Startlinien oben und links sind, wenn wir in physischen Richtungen denken.

CSS-Grid-Layout und CSS-Box-Ausrichtung funktionieren mit Schreibmodi in CSS. Beim Anzeigen einer von rechts nach links geschriebenen Sprache, wie Arabisch, beginnt das Grid oben rechts, sodass der Standardwert justify-content: start bedeutet, dass Grid-Tracks auf der rechten Seite des Grids starten.

Das Festlegen von physischen Eigenschaften, wie das Festlegen von automatischen Margins mit margin-right oder margin-left, oder das absolute Positionieren von Elementen mit den Eigenschaften top, right, bottom und left, berücksichtigt keine Schreibmodi. Im Leitfaden Grids, Logische Werte und Schreibmodi werden wir tiefer in diese Interaktion zwischen CSS-Grid-Layout, Box-Ausrichtung und Schreibmodi eintauchen, was wichtig ist, wenn Sie Websites entwickeln, die in mehreren Sprachen angezeigt werden, oder wenn Sie Sprachen mit unterschiedlichen Schreibrichtungen in einem Design mischen möchten.

Siehe auch