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">
	<h2>Preise mit <code>justify-self:end;</code> rechts positionieren</h2>
	<figure class="grid-item">
    	<h3 class="card-title">nachwachsende Rohstoffe</h3>
        <img src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Meuble_h%C3%A9raldique_cerisier.svg" alt="Kirschbaum in unserem nachhaltig bewirtschafteten Wald">
        <p>unbezahlbar!</p>
        <figcaption class="card-text">Unser Holz wächst in nachhaltig bewirtschafteten Streuobstwiesen.</figcaption>

	</figure>
	<figure class="grid-item">
    	<h3 class="card-title">Büroausstattungen</h3>
        <img src="https://wiki.selfhtml.org/images/3/37/Desk.svg" alt="Schreibtisch (Stock-Vorlage)">
        <p>ab 399€</p>
        <figcaption class="card-text">Schreibtische, Stühle und Regale für ihr Büro</figcaption>
	</figure>    
	<figure class="grid-item">
    	<h3 class="card-title">Essen und Trinken hält die Familie zusammen!</h3>
        <img src="https://wiki.selfhtml.org/images/c/c2/Kitchen.svg" alt="Küche">
        <p>ab 9.999€</p>
        <figcaption class="card-text">Gemeinsam kochen, stilvoll essen und dann am Tisch sitzenbleiben und miteinander reden!</figcaption>
	</figure>    
	<figure class="grid-item">
    	<h3 class="card-title"> Betten</h3>
        <img src="https://wiki.selfhtml.org/images/c/c9/Bedroom.svg" alt="Schlafzimmer">
        <p>ab 599€</p>
        <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“