CSS/Tutorials/Grid/Ausrichtung von Grid-Items
Text-Info
- 15min
- mittel
- Grundkenntnisse in
• HTML
• CSS
Rasterelemente (grid item) nehmen ohne weitere CSS-Festlegungen den verfügbaren Platz ein. Bei festen Größenangaben können die erzeugten Rasterboxen kleiner als der verfügbare Platz zwischen den umgebenden Rasterlinien sein und dann beliebig innerhalb dieses Bereiches ausgerichtet werden.
Einige dieser Eigenschaften sind bereits von Flexbox her bekannt – im Grid Layout können Sie jedoch andere Werte annehmen.
Inhaltsverzeichnis
Abstände
Im Design stoßen die einzelnen Zellen und Rasterbereiche im Allgemeinen nicht direkt aufeinander, sondern haben einen Außenabstand (engl. gutter für Rinne) zwischen Inhalt der Zelle und der eigentlichen Grenze.
Dieser Abstand existiert nur zwischen den Zellen; nicht jedoch am äußeren Rand des Rasters.
.gridContainer {
display: grid;
gap: 1em;
margin: 0em;
}
.gridContainer > .kleiner {
margin: 2em;
}
Der Grid-Container erhält einen Außenabstand (margin) von 0em. Die einzelnen Rasterelemente erhalten jedoch einen Abstand von 1em zwischen den Elementen, nicht jedoch nach außen.
Das Element mit der Klasse .kleiner erhält einen Außenrand von 2em und wird entsprechend kleiner mit einem größeren Abstand zu den umgebenden Rasterlinien dargestellt.
margin für den Außenrand des Containers, bzw einzeln für die einzelnen Rasterelemente festgelegt wird, wirkt gap auf das gesamte Raster.Spalten (gutter) mit gap
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.[1]
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.
Ausrichtung innerhalb von Spalten
Die Eigenschaften align-items and align-self legen die vertikale Ausrichtung innerhalb der Spalten fest.
align-items
Mit der align-items-Eigenschaft erhält ein Grid Container eine Festlegung über die vertikale Ausrichtung aller Kindelemente des Rasters. Der Wert wird an die align-self-Eigenschaft der einzelnen Rasterelemente übergeben.
Folgende Werte sind möglich:
- auto: übernimmt den Wert des Elternelements
- normal: (Standardwert) Element dehnt sich auf verfügbaren Platz aus
- baseline: Element richtet sich an der baseline (oberer Rand) aus
- start: Element richtet sich am oberen Rand aus
- end: Element richtet sich am unteren Rand aus
- center: Element wird in der Mitte zentriert
- stretch: entspricht normal
- first baseline
- last baseline
body {
display: grid;
gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: min-content 1fr 1fr 1fr;
align-items: center;
/* justify-items: center; */
}
align-self
Mit der align-self-Eigenschaft können Sie nun einzelne Rasterelemente vertikal am Raster ausrichten. Dabei wird der durch align-items gesetzte Wert überschrieben.
.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 durchgrid-row: 2 / span 2;über zwei Zellen spannt.
Ausrichtung innerhalb von Reihen
Sie können mit den Eigenschaften justify-items und justify-self Elemente innerhalb von Reihen (inline) ausrichten.
justify-items
Mit der justify-items-Eigenschaft erhält ein Grid Container eine Festlegung über die horizontale Ausrichtung aller Kindelemente des Rasters. Der Wert wird an die justify-self-Eigenschaft der einzelnen Rasterelemente übergeben.
Es sind die gleichen Werte wie bei align-items möglich.
justify-self
Mit der justify-self-Eigenschaft können Sie nun einzelne Rasterelemente horizontal am Raster ausrichten. Dabei wird der durch justify-items gesetzte Wert überschrieben.
.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 durchgrid-column: 2 / span 2;über zwei Zellen spannt
Impressum unten rechts
Im Forum wurde gefragt, wie man Text in einer Zelle, die doppelt so groß wie die anderen Rasterzellen ist, rechts unten ausrichten kann.[2]:
#impressum {
grid-column: -3 / -1;
grid-row: -3 / -1;
align-self: end;
justify-self: end;
padding: 1em;
}
- grid-column und grid-row enden mit dem negativen Wert -1, der zeigt, dass die Zählung vom rechten, bzw. unteren Rand vorzunehmen ist. Dabei wird von -1 bis -3 gezählt, um die doppelte Größe zu erreichen.
- align-self und justify-self haben beide den Wert
end, damit nicht das ganze Feld, sondern nur die vom Inhalt benötigte Breite verwendet wird, wobei sich diese am unteren, rechten Rand ausrichtet. - Damit der Text in der Zelle nicht zu gedrängt wirkt, wurde ihm ein padding von 1em gegeben.
Deshalb ist es empfehlenswert, auf Verschachtelungen von HTML-Elementen innerhalb einens Grids weitgehend zu verzichten.
Ausrichtung des Gestaltungsrasters
Wenn Sie dem Gestaltungsraster eine feste Größe geben, richtet es sich normalerweise an der oberen, linken Ecke aus (je nach Leserichtung kann dies z. B. in arabischen Sprachen und Hebräisch aber auch von rechts nach links sein). Sie können den gesamten Inhalt mit den Eigenschaften align-content vertikal und justify-content horizontal ausrichten.
align-content
Mit der align-content-Eigenschaft können Sie das Gestaltungsraster vertikal ausrichten.
Folgende Werte sind möglich:
- normal:
- start: Elemente werden am oberen Rand ausgerichtet
- end: Elemente werden am unteren Rand ausgerichtet
- center: Elemente werden in der Mitte zentriert
- stretch
- space-around
- space-between: Das Raster verteilt sich über den verfügbaren Raum, es bilden sich je nach Viewport größere Spaltenabstände
- space-evenly: Das Raster verteilt sich über den verfügbaren Raum, es bilden sich je nach Viewport größere Spaltenabstände auch vor den ersten und nach den letzten tracks
- baseline
- first baseline
- last baseline
justify-content
Mit der justify-content-Eigenschaft können Sie das Gestaltungsraster horizontal ausrichten.
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-evenlywürde auch an den äußeren Rändern Abstände erzeugen).
Siehe auch
- Referenz: column-gap
- Flexbox: Spalten (gutter) mit gap
Weblinks
Quellen
- ↑ MDN: gap (grid-gap)
- ↑ SELF-Forum: grid, 1. areas, 2. text-positionierung vom 29.08.2020
align-items:center;nehmen die divs vertikal nur den benötigten Raum ein und werden dann innerhalb der Zelle zentriert.