CSS/Tutorials/Grid/Ausrichtung von Grid-Items
- 20min
- mittel
- Grundkenntnisse in
In den vergangenen Kapiteln wurde vorgestellt, wie man mit Grid Layout Webseiten, aber auch Teilbereiche responsiv gestalten kann. Dabei nehmen die Rasterelemente (grid items) ohne weitere CSS-Festlegungen den ganzen verfügbaren Platz ein.
Bei festen Größenangaben oder anderen CSS-Festlegungen können die erzeugten Rasterboxen kleiner als der verfügbare Platz zwischen den umgebenden Rasterlinien sein und dann kann man es beliebig innerhalb dieses Bereiches links, rechts, oben, unten ausrichten, zentrieren oder strecken.[1][2]
Einige der hier vorgestellten Eigenschaften sind bereits von Flexbox her bekannt – im Grid Layout können sie aufgrund des zweidimensionalen Rasters jedoch andere Werte annehmen.
Inhaltsverzeichnis
Bei der Arbeit mit dem Rasterlayout stehen zwei Achsen zur Verfügung, an denen man Dinge ausrichten können - die Blockachse und die Inline-Achse. Die Blockachse ist die Achse, nach der die Blöcke im Blocklayout angeordnet werden.
Die Inline-Achse verläuft quer zur Blockachse, sie ist die Richtung, in der der Text im regulären Inline-Fluss läuft.
Funktionsweise
In der CSS-Eigenschaftsreferenz finden sich einige Eigenschaften mit verwirrend gleichklingenden Namen:
Mit den *-content- Eigenschaften kann der gesamte Grid-Container ausgerichtet werden.
Die *-items-Eigenschaften legen die Ausrichtung aller Grid-Items fest. Dabei ist place-items die zusammenfassende Eigenschaft für …
- align-items für die Blockachse und
- justify-items für die inline-Achse.
Die Werte werden an die *-self-Eigenschaften der einzelnen Rasterelemente übergeben.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.test {
align-items: var(--align-items);
justify-items: var(--justify-items);
}
.grid-items {
color: darkRed;
background-color: lightRed;
}
.item1 {
grid-area: 1 / 1 / 2 / 2;
}
.item2 {
grid-area: 1 / 2;
}
.item3 {
grid-area: 1 / 3 / span 2;
}
.item4 {
grid-area: 2 / 1 / 3 / 3;
}
Im Beispiel liegen zwei Grids übereinander.
Die gelben Grid-Items nehmen ohne weitere CSS-Festlegungen den gesamten verfügbaren Platz ein.
Ändere die Werte für align-items ( 🡙) und justify-items (🡘) und beobachte, was mit den roten Grid-Items passiert.
Anwendungsbeispiele
Das obere Beispiel ist eine reine Demonstration der Funktionsweise, da es ein 3x3 Grid mit kleinen Elementen zeigt, wie es im normalen Leben nicht vorkommt. (Ausnahme ist unser Spielfeld im Tic-Tac-Toe-Tutorial).
Im folgenden Abschnitt wollen wir Beispiele aus der Praxis zeigen, in denen unterschiedlich große Grid-Items geordnet oder einzelne Grid-Items bewusst mit Weißraum hervorgehoben werden sollen.
Vertikale Ausrichtung mit align-items
Wenn Du ein Raster mit unterschiedlich großen Inhalten hast, möchtest du vielleicht, dass alle Elemente vertikal zentriert werden:
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(6em, 1fr));
grid-auto-flow: dense;
align-items: center;
}
.gallery figure img {
display: block;
width: 100%;
}
Die Bilder sind alle trotz unterschiedlicher Höhen mittig zentriert - es sieht ordentlicher aus!
Wenn alle Elemente oben (z. B. bei einem Kartenlayout, bei dem die Titel oben bleiben müssen) oder unten (z. B. bei einer Reihe Buttons) ausgerichtet werden sollen, wäre align-items das Mittel der Wahl.
Vertikale Ausrichtung mit align-self
Mit der align-self-Eigenschaft können nun einzelne Rasterelemente vertikal am Raster ausgerichtet werden. 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.
Ein Anwendungsfall für eine solche Ausnahme vom regelmäßigen Raster könnte z. B. ein Call-to-Action-Button oder ein Bild sein, die zentriert oder unten ausgerichtet werden, während andere Elemente eine andere Ausrichtung haben.
In diesem Beispiel soll die Bildbeschreibung neben dem Bild stehen, aber die gleiche Größe einnehmen. Dabei kann es bei der konventionellen Verwendung von floats zu unschönen Treppenstufen kommen.[3] Mit Grid Layout sind die beiden Felder immer gleich groß:
.gallery figure {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2em;
}
.gallery figure > figcaption {
align-self: center; /* oder stretch */
}
Das figure-Element ist ein Container für Bilder, Medien und ähnliches. Es hat zwei Kindelemente: ein img und ein figcaption als Bildunterschrift, die aber auch weitere Kindelemente enthalten darf.
Beide Kindelemente sind nun Rasterfelder eines Grids, die automatisch gleich groß sind.
Die figcaption wird durch eine Umrandung sichtbar gemacht und mit align-self: center vertikal zentriert.
Bildunterschriften auf dem Bild positionieren
Oft möchte man Bildunterschriften nicht außerhalb des Bild, sondern auf dem Bild selbst platzieren. In diesem Beispiel wurden die figcaptions absolut positioniert.
Eleganter ist es, dies auch mit Grid Layout zu realisieren.
.stacked {
display: grid;
}
.stacked > * {
grid-area: 1 / 1;
}
.stacked figcaption {
align-self: end;
color: #fea;
text-align: center;
}
Dabei werden alle Kindelemente des figure-Elements mit der Klasse stacked mit grid-area: 1 / 1; übereinander gestapelt.
Die Figcaption wird mit align-self: end; nach unten positioniert und entsprechend dem Hintergrund hellgelb eingefärbt. Alternativ könnte man einen etwas durchscheinenden Hintergund hinzufügen.
Rechtsbündig mit justify-self: end
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.
Mit ihr können nun einzelne Rasterelemente horizontal am Raster ausgerichtet werden. Dabei wird der durch justify-items gesetzte Wert überschrieben.
Dies wäre z.B. für Preise interessant, die rechtsbündig ausgerichtet werden sollen.
figure p {
justify-self: end;
background-color: gold;
font-size: 1.5em;
rotate: -5deg;
padding: 0 0.5rem;
}
Dieses Beispiel haben wir dem Folgekapitel Verschachtelte Raster mit subgrid entnommen. Die Formatierung des Grid-Layout wird - abweichend von allem bisher Gelernten - im Subgrid vorgenommen.
Der Textabsatz wird mit justify-self: end; rechts ausgerichtet und passend formatiert.
Hier stellt sich jetzt die Frage, wann man die oben besprochenen Eigenschaften oder Alternativen wie text-align: right; verwenden sollte. Bei text-align bleibt der Absatz 100% breit, was erst bei einer Färbung des Hintergrunds auffällt. Meiner Meinung nach ist justify-self hier eleganter.
Impressum unten rechts mit place-self
Im Forum wurde gefragt, wie man Text in einer Zelle, die doppelt so groß wie die anderen Rasterzellen ist, rechts unten ausrichten kann.[4]:
#impressum {
grid-column: -3 / -1;
grid-row: -3 / -1;
place-self: end 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.
- place-self habt den Wert
end 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.
Ändere die Werte für end end und beobachte, was passiert.
Deshalb ist es empfehlenswert, auf Verschachtelungen von HTML-Elementen innerhalb eines Grids weitgehend zu verzichten.
Ausrichtung von Grid-Containern
Meine Grids sind zumeist so gestaltet, dass sie den verfügbaren Raum ausfüllen und die Zellen darin so groß sind wie die Grid-Tracks.
Aber das ist ja nicht zwingend so. Ein Grid besteht aus Tracks (Zeilen oder Spalten), und wenn diese nicht die ganze Länge ihrer Achse ausfüllen, gibt's Platz. Und für den muss man entscheiden, wo er bleibt. Vorn, hinten, verteilt, es gibt eine Menge Optionen.
Wenn man dem Gestaltungsraster eine feste Größe gibt, 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). Mit den Eigenschaften align-content kann das gesamte Grid vertikal und mit justify-content horizontal ausgerichtet werden.
Aus diesem Grund zeigen wir hier kein Beispiel, sondern verweisen auf das Tutorial CSS/Tutorials/Ausrichtung/Inhalte zentrieren, in dem gezeigt wird, wie man einzelne Elemente mit
align-content mittig ausrichten kann!
Siehe auch
- Ausrichtung mit CSS
- Inhalte zentrieren
- variable Elemente nebeneinander
- Ausrichtung bei Flexbox
Referenz:
Weblinks
- ↑ W3C: Box Alignment Level 3
- ↑ MDN: Box alignment in CSS Grid Layout
- ↑ SELf-Forum: Anordnung einiger Elemente im Grid vom 26.10.2024
- ↑ SELF-Forum: grid, 1. areas, 2. text-positionierung vom 29.08.2020
