CSS/Tutorials/Grid/Ausrichtung von Grid-Items

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Rasterelemente nehmen ohne weitere CSS-Festlegungen den verfügbaren Platz ein. Bei festen Größenangaben können sie kleiner als das Rasterelement (grid item) sein und dann beliebig innerhalb des Rasterelements ausgerichtet werden.

Einige dieser Eigenschaften sind bereits von Flexbox her bekannt - im Grid Layout können Sie jedoch andere Werte annehmen.


Ausrichtung innerhalb von Spalten[Bearbeiten]

Die Eigenschaften align-items and align-self legen die vertikale Ausrichtung innerhalb der Spalten fest.

align-items[Bearbeiten]

Mit der align-items-Eigenschaft erhält ein Grid Container eine Festlegung über die vertikale Ausrichtung der Kindelemente des Rasters fest. Der Wert wird an die align-self-Eigenschaft der einzelnen Rasterelemente übergeben.

  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Folgende Werte sind möglich:

  • auto: übernimmt den Wert des Elternelements
  • normal: (Standardwert) Element dehnt sich auf verfügbaren Platz aus
  • baseline
  • start:
  • end:
  • center:
  • stretch: entspricht normal
  • first baseline
  • last baseline
Beispiel: Ausrichtung innerhalb von Spalten ansehen …
body {
  display: grid;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: min-content 1fr 1fr 1fr;
  align-items: center;
  /* justify-items: center; */
}
Durch align-items:center; nehmen die divs vertikal nur den benötigten Raum ein und werden dann innerhalb der Zelle zentriert.
Empfehlung: Verändern Sie den Wert auf stretch, auto, normal und beobachten Sie die Veränderungen.

align-self[Bearbeiten]

Mit der align-self-Eigenschaft können Sie nun einzelne Rasterelemente vertikal am Raster ausrichten. Dabei wird der durch align-items gesetzte Wert überschrieben.

  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
Beispiel: vertikale Ausrichtung ansehen …
.a2 {
  align-self: start;
}
.b3 {
  align-self: end;
  height: 4em;
}
.c1 {
  align-self: center;
  grid-column: 3;
  grid-row: 2 / span 2;
}
Die Rasterelemente erhalten unterschiedliche Werte für align-self.
  • align-self: start; richtet es am oberen Rand der Zelle aus
  • align-self: end; richtet es am unteren Rand der Zelle aus
  • align-self: center; zentriert das Rasterelement, das sich durch grid-row: 2 / span 2; über zwei Zellen spannt

Ausrichtung innerhalb von Reihen[Bearbeiten]

Sie können mit den Eigenschaften justify-items und justify-self Elemente innerhalb von Reihen (inline) ausrichten.

justify-items[Bearbeiten]

Mit der justify-items-Eigenschaft erhält ein Grid Container eine Festlegung über die horizontale Ausrichtung der Kindelemente des Rasters. Der Wert wird an die justify-self-Eigenschaft der einzelnen Rasterelemente übergeben.

  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Es sind die gleichen Werte wie bei align-items möglich.


justify-self[Bearbeiten]

Mit der justify-self-Eigenschaft können Sie nun einzelne Rasterelemente horizontal am Raster ausrichten.

  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
Beispiel: horizontale Ausrichtung ansehen …
.a2 {
 justify-self: auto;
}
.b3 {
 grid-column: 2 / span 2;
 justify-self: center;


} 
.c1 {
 justify-self: end;
 width: 5.5em; 
}
Die Rasterelemente erhalten eine feste Breite und unterschiedliche Werte für justify-self.
  • justify-self: auto; könnte auch weggelassen werden, da es den Wert von justify-items übernimmt der hier auto, bzw stretch entspricht.
  • justify-self: end; richtet es am rechten Rand / Ende der Zelle aus
  • justify-self: center; zentriert das Rasterelement, das sich durch grid-column: 2 / span 2; über zwei Zellen spannt

Ausrichtung des Gestaltungsrasters[Bearbeiten]

Wenn Sie dem Gestaltungsraster eine feste Größe geben, richtet es sich normalerweise an der oberen, rechten Ecke aus. Sie können den gesamten Inhalt mit den Eigenschaften align-content vertikal und justify-content horizontal ausrichten.

align-content[Bearbeiten]

Mit der align-content-Eigenschaft können Sie das Gestaltungsraster vertikal ausrichten.

  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari

Folgende Werte sind möglich:

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

justify-content[Bearbeiten]

Mit der justify-content-Eigenschaft können Sie das Gestaltungsraster horizontal ausrichten.

  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari
Beispiel: Ausrichtung aller Inhalte in Grid ansehen …
body {
  display: grid;
  gap: 10px;
  grid-template-columns: 7em 7em 7em;
  grid-template-rows: min-content 7em 7em 7em;
  align-content: center;
  justify-content: space-between;
}
Das Raster erhält nun 3 Spalten mit 7em Breite und 4 Reihen, von den die unteren 3 7em hoch sind.
  • align-content: center; zentriert die 3 Spalten vertikal
  • justify-content: space-between; verteilt die Spalten über den horizontal verfügbaren Raum und lässt Abstände zwischen den Spalten (space-evenly würde auch an den äußeren Rändern Abstände erzeugen).

Spalten (gutter) mit gap[Bearbeiten]

Sie können Rasterelementen mit margin einen Abstand zu den anderen Zellen geben - dieser Abstand besteht dann aber auch am Rand des Grid-Containers. Deshalb wurde die Eigenschaft grid-gap mit den Eigenschaften grid-row-gap und grid-column-gap eingeführt, die Spalten (englisch: gutter) zwischen den einzelnen Rasterzellen ermöglichte. Am Rand schließen die Rasterelemente bündig mit dem Grid-Container ab.

Im Mehrspaltenlayout mit columns gab es bereits eine Eigenschaft namens column-gap, sodass die Eigenschaft im CSS Box Alignment Module Level 3 ohne Präfixe für Grid Layout, Flexbox und columns vereinheitlicht wurde.

Die Eigenschaft gap ist die zusammenfassende Eigenschaft der Eigenschaften row-gap und column-gap. Heute (Stand Oktober 2018) wird sie im Grid Layout von folgenden Browsern unterstützt.[1]

  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari
Beachten Sie: Der IE Edge verwendet die ältere Notation mit Präfix: grid-gap, grid-row-gap und grid-column-gap.
Beispiel: Spalten mit gap ansehen …
main {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1em 2em;
}
In diesem Beispiel wurde auf einen Rand mit margin verzichtet. Stattdessen werden mit gap: 1em 2em; Spalten zwischen den Rasterelementen festgelegt.


Siehe auch[Bearbeiten]

Quellen[Bearbeiten]

  1. MDN: gap (grid-gap)

Weblinks[Bearbeiten]