Beispiel:CSS-grid-ausrichtung-6.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!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">

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>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-grid-ausrichtung-6.html&oldid=99560“