Beispiel:CSS-grid-ausrichtung-1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!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>
<h1>Ausrichtung von Grid-Items</h1>

<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>
<div id="stage">
<div class="grid-container background">
	<div class="grid-item a1">A1</div>
	<div class="grid-item b1">B1</div>
	<div class="grid-item c1">C1</div>
	<div class="grid-item a2">A2</div>
	<div class="grid-item b2">B2</div>
	<div class="grid-item c2">C2</div>

</div>
<div class="grid-container test">  
	<div class="grid-items item1">Item 1</div>
	<div class="grid-items item2">Item 2<br>mit 2 Zeilen Text</div>
	<div class="grid-items item3">Item 3<br>(über 2 Reihen)</div>
	<div class="grid-items item4">Item 4<br>(über 2 Spalten)</div>  
</div>
</div>
<p>Ohne weitere CSS-Festlegungen erstrecken sich Grid-Items auf den gesamten verfügbaren Platz.<br>
Ändere die Werte für <code>align-items</code> ( 🡙) und <code>justify-items</code> (🡘) und beobachte, was passiert.
</p>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-grid-ausrichtung-1.html&oldid=99634“