Beispiel:Grid-ausrichtung-3.html
<!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>
Vertikale Ausrichtung einzelner Grid-Elemente
align-items: normal; Alle Rasterelemente nehmen den gesamten, verfügbaren Raum ein!align-self: end;Sonderangebot!
align-self: center;grid-row: 2 / span 2;height: 6em;align-self: start; </body> </html>
