|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="de">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Grid-Items</title>
|
|
|
|
|
<link rel="stylesheet" href="../../css/layout.css">
|
|
|
|
|
<link rel="stylesheet" href="../../css/grid.css">
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<header>
|
|
|
|
|
<h1>Grid-Layout</h1>
|
|
|
|
|
</header>
|
|
|
|
|
<nav class="navigationbar">
|
|
|
|
|
<a href="../home.html">Home</a>
|
|
|
|
|
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
|
|
|
|
|
<a href="allgemeines.html">Grid-Layout</a>
|
|
|
|
|
<a href="../text_styling/allgemeines.html">Text-Styling</a>
|
|
|
|
|
<a href="../position/allgemeines.html">Position-Eigenschaft</a>
|
|
|
|
|
<a href="../animation/animations.html">Animationen</a>
|
|
|
|
|
</nav>
|
|
|
|
|
<nav class="navigationbar">
|
|
|
|
|
<a href="allgemeines.html">Allgemeines</a>
|
|
|
|
|
<a href="container.html">Container</a>
|
|
|
|
|
<a href="items.html">Items</a>
|
|
|
|
|
</nav>
|
|
|
|
|
<main>
|
|
|
|
|
<article>
|
|
|
|
|
<h2>Grid Item</h2>
|
|
|
|
|
<p>
|
|
|
|
|
Ein grid item ist ein objekt in einem grid container. Standartgemäß ist ein grid item genau über eine
|
|
|
|
|
Spalte und Reihe breit.
|
|
|
|
|
Man kann die grid items aber so gestalten, dass sie auch mehrere Spalten und Reihen breit/hoch sind.
|
|
|
|
|
</p>
|
|
|
|
|
<section>
|
|
|
|
|
<h3>Grid-column/row Eigenschaft</h3>
|
|
|
|
|
<p>
|
|
|
|
|
Mit der grid-row/grid-column Eigenschaft kann man genau bestimmen wie sich die grid items verhalten.
|
|
|
|
|
Start und endpunkte mit grid-(column/row)-(start/end) festlegen. Oder aber den Anfanspunkt festlegen
|
|
|
|
|
und bestimmenwie weit
|
|
|
|
|
sich das bestimmte element ausbreiten darf.
|
|
|
|
|
</p>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
<code>
|
|
|
|
|
.grid-container { <br>
|
|
|
|
|
  display: grid; <br>
|
|
|
|
|
  grid-template-columns: auto auto auto;<br>
|
|
|
|
|
} <br>
|
|
|
|
|
<br>
|
|
|
|
|
.p1 { <br>
|
|
|
|
|
  grid-column-start: 1; <br>
|
|
|
|
|
  grid-column-end: 3; <br>
|
|
|
|
|
  grid-row-start: 1; <br>
|
|
|
|
|
  grid-row-end: 3; <br>
|
|
|
|
|
} <br>
|
|
|
|
|
<br>
|
|
|
|
|
.p4 { <br>
|
|
|
|
|
  grid-column: 1 / span 3; <br>
|
|
|
|
|
}
|
|
|
|
|
</code>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="visual-example" id="example8">
|
|
|
|
|
<p id="item2">p1</p>
|
|
|
|
|
<p>p2</p>
|
|
|
|
|
<p>p3</p>
|
|
|
|
|
<p id="item3">p4</p>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="explanation">
|
|
|
|
|
Hier werden p1 und p4 jeweils so gestaltet das sie sich jeweils über mehrere Spalten/Reihen
|
|
|
|
|
ausbreiten.
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<h3>Grid-area Eigenschaft</h3>
|
|
|
|
|
<p>
|
|
|
|
|
Grid area kann als Shortcut für grid-row-start/end und grid-column-start/end genutzt werden.
|
|
|
|
|
</p>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
<code>
|
|
|
|
|
.grid-container { <br>
|
|
|
|
|
  display: grid; <br>
|
|
|
|
|
  grid-template-columns: auto auto auto auto;<br>
|
|
|
|
|
} <br>
|
|
|
|
|
<br>
|
|
|
|
|
.p1 { <br>
|
|
|
|
|
  grid-area: 1 / 2 / 4 / 4 <br>
|
|
|
|
|
} <br>
|
|
|
|
|
<br>
|
|
|
|
|
</code>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="visual-example" id="example9">
|
|
|
|
|
<p>p1</p>
|
|
|
|
|
<p id="item4">p2</p>
|
|
|
|
|
<p>p3</p>
|
|
|
|
|
<p>p4</p>
|
|
|
|
|
<p>p5</p>
|
|
|
|
|
<p>p6</p>
|
|
|
|
|
<p>p7</p>
|
|
|
|
|
<p>p8</p>
|
|
|
|
|
<p>p9</p>
|
|
|
|
|
<p>p10</p>
|
|
|
|
|
<p>p11</p>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="explanation">
|
|
|
|
|
Bei diesem Beispiel nutzt p2 grid-area, um sich den Platz von eigentlich 5 weiteren p Elementen zu
|
|
|
|
|
nehmen.
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<h3>Grid Areas benennen</h3>
|
|
|
|
|
<p>
|
|
|
|
|
Es ist auch möglich die einzelnen Bereiche zu benennen und einzeln zuzuordnen, mit der
|
|
|
|
|
"grid-template-areas" Eigenschaft.
|
|
|
|
|
</p>
|
|
|
|
|
<div class="code-example" id="example10">
|
|
|
|
|
<code>
|
|
|
|
|
#item5 { grid-area: header; } <br>
|
|
|
|
|
#item6 { grid-area: nav; } <br>
|
|
|
|
|
#item7 { grid-area: main; } <br>
|
|
|
|
|
#item8 { grid-area: aside; } <br>
|
|
|
|
|
#item9 { grid-area: footer; } <br>
|
|
|
|
|
<br>
|
|
|
|
|
.grid-container { <br>
|
|
|
|
|
  display: grid; <br>
|
|
|
|
|
  grid-template-areas: <br>
|
|
|
|
|
  'header header header header header header' <br>
|
|
|
|
|
  'nav main main main aside aside' <br>
|
|
|
|
|
  'nav footer footer footer footer footer'; <br>
|
|
|
|
|
  gap: 10px; <br>
|
|
|
|
|
} <br>
|
|
|
|
|
<br>
|
|
|
|
|
</code>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="visual-example" id="example10">
|
|
|
|
|
<p id="item5">header</p>
|
|
|
|
|
<p id="item6">nav</p>
|
|
|
|
|
<p id="item7">main</p>
|
|
|
|
|
<p id="item8">aside</p>
|
|
|
|
|
<p id="item9">footer</p>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="explanation">
|
|
|
|
|
Hier wird mit Hilfe von grid-template-areas, direkt Bereiche erzeugt indem die Items in den
|
|
|
|
|
Bereichen aufgerufen werden,
|
|
|
|
|
in denen sie auftauchen sollen.
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
</article>
|
|
|
|
|
</main>
|
|
|
|
|
<footer>
|
|
|
|
|
<p>Erstellt von: Lukas Pfau</p>
|
|
|
|
|
</footer>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
