Beispiel:CSS-grid-ausrichtung-5.html
Aus SELFHTML-Wiki
<html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body {
margin: 0.5em auto; max-width: 65em; min-height: 90vh; display: grid; grid-gap: 1em; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: min-content 1fr 1fr 1fr; justify-items: normal;
}
h1, div {
border-radius: 0 0.5em 0.5em; border: thin solid; padding: .5em;
}
h1 {
background: #F1F3F4; border-color: #d5d5d5; grid-column: 1 / -1;
}
div {
background: #fffbf0; border-color: #e7c157;
} .a2 {
justify-self: auto;
} .b3 {
grid-column: 2 / span 2; justify-self: center;
} .c1 {
justify-self: end; width: 5.5em;
} </style> <title>Ausrichtung von Grid-Elementen - 5</title> </head>
<body>
horizontale Ausrichtung von Grid Elementen
A1
B1
C1
justify-self: end
justify-self: end
A2
justify-self: auto
justify-self: auto
B2
C2
A3
B3-B3
justify-self: center
justify-self: center
</body>
</html>