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" 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>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-grid-ausrichtung-1.html&oldid=61136“