Beispiel:CSS-grid-ausrichtung-2.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;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: min-content 1fr 1fr 1fr;
  align-items: normal;
}		
		
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;
}
.a2 {
  align-self: start;
}

.b3 {
  align-self: end;
  height: 4em;
}
.c1 {
  align-self: center;
  grid-column: 3;
  grid-row: 2 / span 2;
}
</style>
	<title>Ausrichtung von grid Elementen - 2</title>
</head>

<body>
<h1>vertikale Ausrichtung von Grid Elementen</h1>

  <div class="a1">a1</div>
  <div class="b1">b1</div>
  <div class="c1">c1<br> align-self: center</div>
  <div class="a2">a2<br> align-self: start</div>
  <div class="b2">b2</div>
  <div class="a3">a3</div>
  <div class="b3">b3 <br> align-self: end</div>
  <div class="c3">c3</div>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-grid-ausrichtung-2.html&oldid=55112“