Beispiel:CSS-grid-ausrichtung-4.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!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;
	padding: 1em;
	border: 1px solid grey;
	display: grid;
	gap: 10px;
	grid-template-columns: 7em 7em 7em;
	grid-template-rows: min-content 7em 7em 7em;
	align-content: center;   /* vertikal - ändern Sie den Wert auf start, bzw end */
	justify-content: space-between;   /* horizontal - ändern Sie den Wert auf 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 - 4</title>
</head>

<body>
<h1>Ausrichtung von Grids</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>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-grid-ausrichtung-4.html&oldid=68544“