Beispiel:CSS-grid-ausrichtung-6.html
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>justify-self: end;</title> <style> .main-grid-container { /* article */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(9em, 15em)); }
article h2 {
grid-column: 1 / -1;
}
.grid-item { /* figure */
display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; background-color: #fff;
border: medium solid #c82f04;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); margin: 0 0.5rem 1rem 0.5rem; padding: 0;
}
figure h3 { margin: 0 0 1em;; padding: 0.5em; text-align: center; background: #c82f04; color: white; }
figure img {
width: 100%; height: auto;
}
figure p { align-self: end; justify-self: end;
background-color: gold;
font-size: 1.5em; rotate: -5deg; padding: 0 0.5rem; }
figcaption { margin: 1em 0; padding: 0.5em; } </style> </head>
<body>
<article class="main-grid-container">
Inhaltsverzeichnis
Preise mit justify-self:end;
rechts positionieren
<figure class="grid-item">
nachwachsende Rohstoffe
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Meuble_h%C3%A9raldique_cerisier.svg" alt="Kirschbaum in unserem nachhaltig bewirtschafteten Wald">
unbezahlbar!
<figcaption class="card-text">Unser Holz wächst in nachhaltig bewirtschafteten Streuobstwiesen.</figcaption>
</figure> <figure class="grid-item">
Büroausstattungen
<img src="https://wiki.selfhtml.org/images/3/37/Desk.svg" alt="Schreibtisch (Stock-Vorlage)">
ab 399€
<figcaption class="card-text">Schreibtische, Stühle und Regale für ihr Büro</figcaption>
</figure> <figure class="grid-item">
Essen und Trinken hält die Familie zusammen!
<img src="https://wiki.selfhtml.org/images/c/c2/Kitchen.svg" alt="Küche">
ab 9.999€
<figcaption class="card-text">Gemeinsam kochen, stilvoll essen und dann am Tisch sitzenbleiben und miteinander reden!</figcaption>
</figure> <figure class="grid-item">
Betten
<img src="https://wiki.selfhtml.org/images/c/c9/Bedroom.svg" alt="Schlafzimmer">
ab 599€
<figcaption class="card-text">Betten und Schlafzimmer in allen gewünschten Breiten und Längen - auch für Großgewachsene!</figcaption>
</figure> </article>
</body> </html>