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
147 lines
5.9 KiB
HTML
2 years ago
|
<!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>   display: grid; <br>   grid-template-columns: auto auto auto; <br>   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>   display: grid; <br>   grid-template-columns: auto auto auto; <br>   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>   display: grid; <br>   grid-template-columns: 50px 50px 50px;<br>   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>
|
||
|
|
  display: grid; <br>
|
||
|
|
  grid-template-columns: 50px 50px 50px; <br>
|
||
|
|
  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>
|