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.

147 lines
5.9 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-Container</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 Container</h2>
<p>
Grid Container sind der fundamentale Bestandteil des Grid-Layouts. Sie sind das übergeordnete Element
über den Grid items.
Der Contaienr gibt an, wie die Items angeordnet werden sollen.
</p>
<section>
<h3>Grid-Templates</h3>
<p>
Die grid-template eigenschaften können als "grid-template-columns" und als "grid-template-rows"
verwendet werden.
Die Anzahl der zur Eigenschaft hinzugefügten werten zeigt an, wie viele Reihen/Spalten gewünscht
sind. Man kann diese auch spezifiezieren
um so die Breite/Höhe zu bestimmen. Bei Dem Wert "auto" wird der Wert automatisch angepasst. Wenn
alle den Wert "auto" besitzen
teilen sich alle Spalten/Reihen gleichmäßig auf.
</p>
<div class="code-example">
<code>
.grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: auto auto auto; <br> &emsp; gap: 10px;<br>}
</code>
</div>
<div class="visual-example" id="example4">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
<p>p9</p>
</div>
<p class="explanation">
Dieses Beispiel erstellt ein grid mit 3 Spalten. Wenn zu der "grid-template-columns" Eigenschaft
noch weitere Werte hinzugefügt werden würden,
könnte man weitere Spalten erstellen.
</p>
<br>
<div class="code-example">
<code>
.grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: auto auto auto; <br> &emsp; grid-template-rows: 150px 100px 200px;<br>}
</code>
</div>
<div class="visual-example" id="example5">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
<p>p9</p>
</div>
<p class="explanation">
Hier wird die "grid-template-rows" Eigenschaft verwendet um die Höhe der jeweiligen Reihen
anzupassen.
</p>
</section>
<section>
<h3>Align/Justify Content</h3>
<p>
Die justify-content und align-content Eigenschafften sind dazu da, die grid items im grid container
anzuordnen.
Dabei ist justify-content dazu da, das gesammte grid auszurichten. Während align-content nur
vertikal das grid anordnet
</p>
<div class="code-example">
<code>
.grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: 50px 50px 50px;<br> &emsp; justify-content: space-evenly <br>}
</code>
</div>
<div class="visual-example" id="example6">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
<p class="explanation">
Hier wird die "justify-content" Eigenschaft verwendet um die grid items gleichmäßig zu verteilen.
</p>
<br>
<div class="code-example">
<code>
.grid-container { <br>
&emsp; display: grid; <br>
&emsp; grid-template-columns: 50px 50px 50px; <br>
&emsp; justify-content: center <br>}
</code>
</div>
<div class="visual-example" id="example7">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
<p>p9</p>
</div>
<p class="explanation">
Hier wird die "justify-content" Eigenschaft verwendet um die grid items zu zentrieren.
</p>
</section>
</article>
</main>
<footer>
<p>Erstellt von: Lukas Pfau</p>
</footer>
</body>
</html>