Ausrichten von Elementen im CSS-Grid-Layout

Beim Arbeiten mit Grid-Layout stehen Ihnen zwei Achsen zur Verfügung, an denen Sie Dinge ausrichten können – die Block-Achse und die Inline-Achse. Die Block-Achse ist die Achse, auf der Blöcke im Block-Layout angeordnet werden. Wenn Sie zwei Absätze auf Ihrer Seite haben, werden sie untereinander angezeigt, daher beschreiben wir diese Richtung als Block-Achse.

Die Inline-Achse verläuft quer zur Block-Achse, es ist die Richtung, in der Text im regulären Inline-Fluss läuft.

Wir können den Inhalt innerhalb von Grid-Bereichen und die Grid-Tracks selbst auf diesen beiden Achsen ausrichten.

Die align-self- und align-items-Eigenschaften 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.

Im folgenden Beispiel haben wir vier Grid-Bereiche in unserem Grid. Wir können die align-items-Eigenschaft auf dem Grid-Container verwenden, um die Elemente mit den Werten normal, stretch oder <self-position> oder <baseline-position> auszurichten:

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

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

* {
  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;
}

.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;
}

<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 Kindes <div> durch den Inhalt des <div> bestimmt wird. Dies steht im Gegensatz zum vollständigen Weglassen von align-items, bei dem die Höhe jedes <div> gestreckt wird, um seinen Grid-Bereich auszufüllen.

Die Eigenschaft align-items setzt die align-self-Eigenschaft für alle Kinder-Grid-Elemente. Das bedeutet, dass Sie die Eigenschaft individuell setzen können, indem Sie align-self direkt auf ein Grid-Element anwenden.

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

* {
  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;
}

.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;
}

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

Das Standardverhalten für align-self ist, vom align-items-Wert des Grid-Containers zu erben, dessen Standard normal zu stretch resolviert, es sei denn, es handelt sich um Elemente mit einem intrinsischen Seitenverhältnis, in welchem Fall sie sich als start verhalten. Der Grund dafür ist, dass, wenn Elemente mit einem Seitenverhältnis gestreckt werden, sie verzerrt würden.

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 wählen können, ähneln den normal, stretch, <self-position> und <baseline-position> Werten der align-self-Eigenschaft, zusammen mit left und right. Werte umfassen:

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

Sie können dasselbe Beispiel wie für align-items unten sehen. Diesmal wenden wir die justify-self-Eigenschaft an.

Nochmals, der Standard ist stretch, außer für Elemente mit einem intrinsischen Seitenverhältnis. Das bedeutet, dass Grid-Elemente standardmäßig ihren Grid-Bereich abdecken, es sei denn, Sie ändern die Ausrichtung. In diesem Beispiel demonstriert das erste Element den Standard-stretch-Ausrichtungswert:

* {
  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;
}

.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;
}

<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 justify-self-Werte für alle Grid-Elemente in dem Container zu setzen.

Die place-items-Eigenschaft ist ein Shorthand für align-items und justify-items.

Die place-self-Eigenschaft ist ein Shorthand für align-self und justify-self.

Indem wir die Align- und Justify-Eigenschaften kombinieren, können wir ein Element leicht innerhalb eines Grid-Bereichs zentrieren.

* {
  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;
}

.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;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
</div>

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

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

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

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

Die align-content-Eigenschaft wird auf den Grid-Container angewendet, da sie am gesamten Grid funktioniert.

In diesem Beispiel hat der 500px mal 500px Grid-Container drei Zeilen und drei Spalten mit 100px Tracks und einem 10px Zwischenraum. Das bedeutet, dass es Platz innerhalb des Grid-Containers in beiden, der Block- und Inline-Richtung gibt.

Standardmäßig sind unsere Grid-Tracks in der oberen linken Ecke des Grids, an den Start-Grid-Linien ausgerichtet, da das Standardverhalten im Grid-Layout start ist:

* {
  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;
}

.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;
}

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

Mit demselben CSS und HTML fügen wir in diesem Beispiel align-content mit einem Wert von end zum Container hinzu, sodass sich die Tracks alle zur Endlinie des Grid-Containers in der Block-Dimension bewegen:

.wrapper {
  align-content: end;
}

* {
  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;
}

.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;
}

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

Wir können auch die <content-distribution> Raumverteilungswerte von space-between, space-around, space-evenly und stretch anwenden. In diesem Beispiel setzen wir align-content, das die Tracks auf der Block-Achse ausrichtet, auf space-between, das die Tracks auseinanderreiht:

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

* {
  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;
}

.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;
}

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

Wenn ein Element mehr als einen Grid-Track überspannt, kann die Verwendung eines Raumverteilungswertes dazu führen, dass Elemente in Ihrem Grid größer werden, da der zusätzliche Raum zwischen den Tracks auf das überspannende Element hinzugefügt wird. Wenn Sie diese Werte verwenden, stellen Sie daher sicher, dass der Inhalt der Tracks mit dem zusätzlichen Raum umgehen kann oder dass Sie Ausrichtungseigenschaften auf die Elemente angewendet haben, sodass sie sich zum Start oder Ende bewegen, anstatt sich zu strecken.

Im untenstehenden Bild haben wir das Grid mit zwei verschiedenen align-content-Werten platziert, um start und space-between zu vergleichen. Sie können sehen, wie die ersten zwei Elemente, die zwei Zeilen-Tracks überspannen, im space-between-Beispiel zusätzliche Höhe gewonnen haben, da sie den Raum einnehmen, der durch den freien Raum zwischen den drei Zeilen verteilt wurde:

Wir können justify-content verwenden, um die gleiche Art von Ausrichtung auf der Inline-Achse durchzuführen, die wir mit align-content für die Block-Achse verwendet haben.

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

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

* {
  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;
}

.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;
}

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

Eine andere Möglichkeit, Elemente innerhalb ihres Bereichs auszurichten, ist die Verwendung von automatischen Rändern. Wenn Sie jemals ein Layout im Ansichtsfenster zentriert haben oder ein Block-Element innerhalb seines übergeordneten Elements, haben Sie dies möglicherweise getan, indem Sie die rechten und linken Ränder des zu zentrierenden Elements auf auto gesetzt haben. Der automatische Rand nimmt den gesamten verfügbaren Raum ein. Wenn der Rand auf beiden Seiten auf auto gesetzt wird, wird das Block-Element in die Mitte geschoben, da beide Ränder versuchen, den gesamten Raum einzunehmen.

Im nächsten Beispiel hat Element 1 seine margin-left-Eigenschaft auf auto gesetzt. Dies schiebt den Inhalt auf die rechte Seite des Bereichs, da der automatische Rand den verfügbaren Raum einnimmt, der nach Zuweisung des für den Inhalt benötigten Raums übrig bleibt:

* {
  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;
}

.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;
}

<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 Entwickler-Tools Ihres Browsers, um zu sehen, wie das Element ausgerichtet ist:

Alle diese Beispiele waren in Englisch, einer Links-nach-Rechts-Sprache. Das bedeutet, dass unsere Startlinien oben links in unserem Grid sind, wenn wir in physischen Richtungen denken.

Das CSS-Grid-Layout und die CSS-Box-Ausrichtung arbeiten mit Schreibrichtungen in CSS. Wenn Sie eine Rechts-nach-Links-Sprache wie Arabisch anzeigen, ist der Anfang des Grids oben rechts, sodass das Standard von justify-content: start bedeuten würde, dass die Grid-Tracks auf der rechten Seite des Grids beginnen.

Das Festlegen von physischen Eigenschaften wie dem Festlegen von automatischen Rändern mit margin-right oder margin-left, oder das absolute Positionieren von Elementen mit den top, right, bottom und left Versätzen, respektiert keine Schreibrichtungen. Im Leitfaden zu Grids, logischen Werten und Schreibrichtungen werden wir weiter auf diese Interaktion zwischen CSS-Grid-Layout, Box-Ausrichtung und Schreibrichtungen eingehen. Dies wird wichtig zu verstehen sein, wenn Sie Websites entwickeln, die dann in mehreren Sprachen angezeigt werden, oder wenn Sie Sprachen oder Schreibrichtungen in einem Design mischen möchten.

• Grundlegende Konzepte des Grid-Layouts
• Beziehung des Grid-Layouts zu anderen Layoutmethoden
• Grid-Layout mit linienbasierter Platzierung
• Grid-Template-Bereiche
• Grid-Layout mit benannten Grid-Linien
• Automatische Platzierung im Grid-Layout
• Box-Ausrichtung im CSS-Grid-Layout