css mit Adi Prinz

Grid-Elemente ausrichten

Die HTML-Grid-Struktur besteht aus drei Ebenen:

  • dem Grid-Container
  • den Grid-Items
  • den Inhalt der Grid-Items

Sechs CSS-Eigenschaften stehen dafür zur Verfügung:

  • justify-content
  • align-content
  • justify-items
  • align-items
  • justify-self
  • align-self

Grid-Achsen

Als zweidimensionale Layoutmethode bietet Grid immer zwei Achsen für die Ausrichtung. Die Inline-Achse ist die Achse, die der Richtung entspricht, in der Wörter in einem Satz im verwendeten Schreibmodus laufen würden, also horizontal. Um Elemente an der Inline-Achse auszurichten, verwenden Sie die Eigenschaften 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, also vertikal. Um Elemente an der Block-Achse auszurichten, verwenden Sie die Eigenschaften align-content, align-items und align-self.

Achsen-Begriffe

  • Inline-Achse -> inline-axis, column-axis
  • Block-Achse -> block-axis, row-axis

Ausrichten an der Inline Achse

Für das Ausrichten an der Inline-Achse bietet CSS 3 Eigenschaften:

  • justify-content
  • justify-items
  • justify-self

justify-content

justify-content definiert wie der Browser den Abstand zwischen Items entlang der Inline-Achse eines Grid-Containers verteilt.

Folgende Werte sind möglich:

  • justify-content: start -> Setzt den Grid-Container an den linken Rand des verfügbaren Platz (Standardwert)
  • justify-content: end -> Setz den Grid-Container an den rechten Rand
  • justify-content: center -> Zentriert den Grid-Container hoizontal
  • justify-content: space-between -> Legt freien Platz zwischen die Spalten
  • justify-content: space-around -> Legt freien Platz nach recht und links
  • justify-content: space-evenly -> Verteilt freien Platz zwischen Grid-Columns
  • initial
  • inherit

Beispiel-CSS

.wrapper20 {
  grid-gap: 2px;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
  justify-content: space-evenly;
}

Beispiel-HTML

<div id="wrapper" class="wrapper20"> 
  <div class="item">1</div>
  <-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3
4
5
6

w3schools-Beispiele
developer.mozilla-Beispiele

justify-items

Mit justify-items werden Items innerhalb der Grid-Areas an der Inline-Achse ausgerichtet.

Folgende Werte sind möglich:

  • justify-items: normal -> Füllt Items im verfügbaren Grid aus (Standardwert)
  • justify-items: stretch -> Wie normal
  • justify-items: center -> Zentriert Items im verfügbaren Grid aus
  • justify-items: start -> Plaziert Items am Beginn im verfügbaren Grid
  • justify-items: end -> Plaziert Items am Ende im verfügbaren Grid
  • justify-items: baseline -> Items werden an der Grundlinie des Grid positioniert
  • initial
  • inherit

Beispiel-CSS

.wrapper21 {
  grid-gap: 2px;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(2, 100px);
  justify-items: center;
}

Beispiel-HTML

<div id="wrapper" class="wrapper21"> 
  <div class="item">1</div>
  <-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3
4
5
6

developer.mozilla-Beispiele

justify-self

Mit justify-self werden Items innerhalb der Grid-Areas an der Inline-Achse individuell ausgerichtet. justify-self ist eine Eigenschaft des Items und nicht des Containers.

Folgende Werte sind möglich:

  • justify-self: auto -> Verwendete den Wert der justify-items-Eigenschaft des übergeordneten Containers (Standardwert)
  • justify-self: normal -> Füllt Item im verfügbaren Grid aus
  • justify-self: stretch -> Wie normal
  • justify-self: center -> Zentriert Item im verfügbaren Grid aus
  • justify-self: start -> Plaziert Item am Beginn im verfügbaren Grid
  • justify-self: end -> Plaziert Item am Ende im verfügbaren Grid
  • justify-self: baseline -> Item wird an der Grundlinie des Grid positioniert
  • initial
  • inherit

Beispiel-CSS

.wrapper22 {
  grid-gap: 2px;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(2, auto);
}
.wrapper22 .item:nth-child(1) {
  justify-self: start;
}

Beispiel-HTML

<div id="wrapper" class="wrapper22"> 
  <div class="item">1</div>
  <-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3
4
5
6

developer.mozilla-Beispiele

Ausrichten an der Block Achse

Für das Ausrichten an der Block-Achse bietet CSS 3 Eigenschaften:

  • align-content
  • align-items
  • align-self

align-content

align-content definiert wie der Browser den Abstand zwischen Items entlang der Block-Achse eines Grid-Containers verteilt.

Folgende Werte sind möglich:

  • align-content: stretch -> Setzt den Grid-Container an den linken Rand des verfügbaren Platz (Standardwert)
  • align-content: start -> Setzt den Grid-Container an den linken Rand des verfügbaren Platz (Standardwert)
  • align-content: end -> Setz den Grid-Container an den rechten Rand
  • align-content: center -> Zentriert den Grid-Container hoizontal
  • align-content: space-between -> legt freien Platz zwischen die Spalten
  • align-content: space-around -> Legt freien Platz nach recht und links
  • align-content: space-evenly -> Verteilt freien Platz zwischen Grid-Columns
  • initial
  • inherit

Beispiel-CSS

.wrapper23 {
  height: 300px;
  grid-gap: 2px;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
  align-content: center;
}

Beispiel-HTML

<div id="wrapper" class="wrapper23"> 
  <div class="item">1</div>
  <-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3
4
5
6

w3schools-Beispiele
developer.mozilla-Beispiele

align-items

Mit align-items werden Items innerhalb der Grid-Areas an der Block-Achse ausgerichtet.

Folgende Werte sind möglich:

  • align-items: stretch -> (Standardwert) Items werden gedehnt, um in die Grid-Area zu passen
  • align-items: start -> Item richtet sich am Beginn der Grid-Area aus
  • align-items: end -> Item richtet sich am Ende der Grid-Area aus
  • align-items: center -> Item wird in der Mitte der Grid-Area zentriert
  • align-items: baseline -> Items werden an der Grundlinie der Grid-Areas positioniert
  • align-items: initial
  • align-items: inherit

Beispiel-CSS

.wrapper24 {
  height: 300px;
  grid-gap: 2px;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
  align-items: end;
}

Beispiel-HTML

<div id="wrapper" class="wrapper24"> 
  <div class="item">1</div>
  <-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3
4
5
6

w3schools-Beispiele
developer.mozilla-Beispiele

align-self

Mit align-self werden Items innerhlb der Grid-Areas an der Block-Achse individuell ausgerichtet. align-self ist eine Eigenschaft des Items und nicht des Containers.

Folgende Werte sind möglich:

  • align-self: auto -> (Standardwert) Das Items erbt die Eigenschaft align-items seines Grid-Containers (Standard -> stretch)
  • align-self: stretch -> Items wird gedehnt, um in die Grid-Area zu passen
  • align-self: start -> Item richtet sich am Beginn der Grid-Area aus
  • align-self: end -> Item richtet sich am Ende der Grid-Area aus
  • align-self: center -> Item wird in der Mitte der Grid-Area zentriert
  • align-self: baseline -> Item wird an der Grundlinie der Grid-Areas positioniert
  • align-self: initial
  • align-self: inherit

Beispiel-CSS

.wrapper25 {
  height: 300px;
  grid-gap: 2px;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, auto);
}
.wrapper25 .item:nth-child(1) {
  align-self: start;
}
.wrapper25 .item:nth-child(6) {
  align-self: center;
}

Beispiel-HTML

<div id="wrapper" class="wrapper25"> 
  <div class="item">1</div>
  <-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3
4
5
6

w3schools-Beispiele
developer.mozilla-Beispiele

Kurzschreibweisen für Ausrichtungen (Shorthands)

CSS-Grid bietet noch Shorthand-Eigenschaften an. Damit kann man Items und Container gleichzeitig sowohl entlang der Block- als auch der Inline-Achse ausrichten.
Folgende Eigenschaften stehen zur Verfügung:

  • place-content -> Zusammenfassung für align-content und justify-content
  • place-items -> Zusammenfassung für align-items und justify-items

place-content

Alle Eigenschaften von align-content und justify-content stehen zur Verfügung.

Beispiel-CSS

.wrapper26 {
  height: 300px;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 60px);
  grid-template-rows: repeat(2, 80px);
  place-content: center end;
}

Beispiel-HTML

<div id="wrapper" class="wrapper26"> 
  <div class="item">1</div>
  <-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3
4
5
6

developer.mozilla-Beispiele

place-items

Alle Eigenschaften von align-items und justify-items stehen zur Verfügung.

Beispiel-CSS

.wrapper27 {
  grid-gap: 10px;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(2, 80px);
  place-items: end center;
}

Beispiel-HTML

<div id="wrapper" class="wrapper27"> 
  <div class="item">1</div>
  <-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3
4
5
6

developer.mozilla-Beispiele

Items Reihenfolge mit order ändern

Die CSS Eigenschaft order gibt die Reihenfolge an, in der Grid-Items innerhalb ihres Grid-Containers dargestellt werden. Items werden in aufsteigender Reihenfolge des order-Werts dargestellt. Items mit dem gleichen order-Wert werden in der Reihenfolge dargestellt, in der sie im Quelltext auftauchen.
Folgende Werte stehen zur Verfügung:

  • 0 -> Standarwert wenn nicht definiert
  • z.B. 1 -> Positive Zahlen
  • z.B. -1 -> Negative Zahlen

Order-Eigenschaft

Beispiel-CSS

.wrapper28 {
  grid-gap: 10px;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(2, 80px);
}
.wrapper28 .item:nth-child(1) {
  order: 2;
}
.wrapper28 .item:nth-child(2) {
  order: 1;
}
.wrapper28 .item:nth-child(3) {
  order: -1;
}

Beispiel-HTML

<div id="wrapper" class="wrapper28"> 
  <div class="item">1</div>
  <-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3
4
5
6