Beispiel:CSS-grid-ausrichtung-1.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0;" />
<style>
body {
margin: 10px auto;
max-width: 65em;
min-height: 90vh;
display: grid;
gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: min-content 1fr 1fr 1fr;
align-items: center;
/* justify-items: center; */
}
h1, div {
border-radius: 0px 0.5em 0.5em;
border: 1px solid;
padding: 10px;
}
h1 {
background: #F1F3F4;
border-color: #d5d5d5;
grid-column: 1 / -1;
}
div {
background: #fffbf0;
border-color: #e7c157;
}
</style>
<title>Ausrichtung von grid Elementen - 1</title>
</head>
<body>
<h1>vertikale Ausrichtung von Grid Elementen</h1>
<div class="a1">a1</div>
<div class="b1">b1</div>
<div class="c1">c1</div>
<div class="a2">a2</div>
<div class="b2">b2</div>
<div class="c2">c2</div>
<div class="a3">a3</div>
<div class="b3">b3</div>
<div class="c3">c3</div>
</body>
</html>