Beispiel:CSS-grid-ausrichtung-5.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<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
A2
justify-self: auto
B2
C2
A3
B3-B3
justify-self: center


</body> </html>

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