You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

157 lines
6.3 KiB
HTML

<!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.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>
&emsp; display: grid; <br>
&emsp; grid-template-columns: auto auto auto;<br>
} <br>
<br>
.p1 { <br>
&emsp; grid-column-start: 1; <br>
&emsp; grid-column-end: 3; <br>
&emsp; grid-row-start: 1; <br>
&emsp; grid-row-end: 3; <br>
} <br>
<br>
.p4 { <br>
&emsp; 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>
&emsp; display: grid; <br>
&emsp; grid-template-columns: auto auto auto auto;<br>
} <br>
<br>
.p1 { <br>
&emsp; 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>
&emsp; display: grid; <br>
&emsp; grid-template-areas: <br>
&emsp; 'header header header header header header' <br>
&emsp; 'nav main main main aside aside' <br>
&emsp; 'nav footer footer footer footer footer'; <br>
&emsp; 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>