Beispiel:CSS-grid-ausrichtung-3.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">
	<style>
body {
	border: medium dotted darkred;
	margin: .5em auto;
	max-width: 65em;
	min-height: 90vh;
	display: grid;
	gap: 1em;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: min-content 1fr 1fr 1fr;
	align-items: normal;
}
.a2 {
	align-self: start;
}

.b1 {
	align-self: end;
	rotate: -10deg;
	color: #c82f04;
	background-color: #ffebe6;
}

.c1 {
	align-self: center;
	grid-column: 3;
	grid-row: 2 / span 2;
	height: 5em;
}

.b1 >p {
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
}

h1,
div {
	border-radius: 0 0.5em 0.5em;
	border: thin solid;
	padding: 1em;
}

h1 {
	background: #F1F3F4;
	border-color: #d5d5d5;
	grid-column: 1 / -1;
}

div {
	background: #fffbf0;
	border-color: #e7c157;
}
</style>
	<title>Ausrichtung von Grid-Elementen - 3</title>
</head>

<body>
<h1>Vertikale Ausrichtung <b>einzelner</b> Grid-Elemente</h1>

<div class="a1">A1<br><code>align-items: normal;</code> Alle Rasterelemente nehmen den gesamten, verfügbaren Raum ein!</div>
<div class="b1">B1<br> <code>align-self: end;</code><p>Sonderangebot!</p></div>
<div class="c1">C1<br> <code>align-self: center;</code><br><code>grid-row: 2 / span 2;</code><br><code>height: 6em;</code></div>
<div class="a2">A2
	<br><code>align-self: start;</code> </div>
<div class="b2">B2</div>
<div class="a3">A3</div>
<div class="b3">B3</div>
<div class="c3">C3</div>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-grid-ausrichtung-3.html&oldid=99563“