Beispiel:Grid-ausrichtung-1.html
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" items="width=device-width, initial-scale=1.0"> <style> .grid-container { width: 30em; aspect-ratio: 3/2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
.test { align-items: var(--align-items); justify-items: var(--justify-items); border: medium dotted darkred; }
.grid-item { background: #fffbf0; }
.grid-items { color: #c82f04; background-color: #ffebe6; border: thin solid; padding: .2em; }
.item1 { grid-area: 1 / 1 / 2 / 2; }
.item2 { grid-area: 1 / 2; }
.item3 { grid-area: 1 / 3 / span 2; }
.item4 { grid-area: 2 / 1 / 3 / 3; }
label {
display:inline-block;
margin: 1em; }
- stage {
position: relative;
height: 22em; }
.eins, .test { position: absolute; top: 0; left: 0; }
.eins {
}
.grid-item { border-radius: 0 0.5em 0.5em; border: thin solid; border-color: #e7c157; padding: 1em; }
- root {
--align-items: start; --justify-items: center;
}
</style> <script> document.addEventListener('DOMContentLoaded', function () { const menu = document.querySelector('#grid-control'); const grid = document.querySelector('.test');
menu.addEventListener('change', updateGrid);
function updateGrid () {
let align = document.querySelector('#align-items').value; grid.style.setProperty('--align-items', align); let justify = document.querySelector('#justify-items').value; grid.style.setProperty('--justify-items', justify);
}
});
</script>
<title>Ausrichtung von Grid-Items</title>
</head>
<body>
Ausrichtung von Grid-Items
<nav id="grid-control">
<label for="align-items">align-items ( 🡙):</label> <select id="align-items"> <option value="start">start</option> <option value="center" checked>center</option> <option value="end">end</option> <option value="stretch">stretch</option>
</select>
<label for="justify-items">justify-items (🡘):</label> <select id="justify-items"> <option value="start">start</option> <option value="center" checked>center</option> <option value="end">end</option> <option value="stretch">stretch</option>
</select> </nav>
mit 2 Zeilen Text
(über 2 Reihen)
(über 2 Spalten)
Ohne weitere CSS-Festlegungen erstrecken sich Grid-Items auf den gesamten verfügbaren Platz.
Ändere die Werte für align-items ( 🡙) und justify-items (🡘) und beobachte, was passiert.
</body> </html>
