|
|
|
|
<!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-Allgemein</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>Allgemeines</h2>
|
|
|
|
|
<p>
|
|
|
|
|
Das Grid-Layout ermöglicht es Websiten einfacher zu gestalten, indem Reihen und Spalten genutzt und
|
|
|
|
|
ineinander verschachtelt werden können,
|
|
|
|
|
um die Objeket der Seite so anzuordnen, wie es gewünscht wird.
|
|
|
|
|
</p>
|
|
|
|
|
<section>
|
|
|
|
|
<h3>Display Eigenschaft</h3>
|
|
|
|
|
<p>
|
|
|
|
|
Ein HTML element wird zu einem Grid-Container, wenn die "display"-Eigenschaft auf "grid" oder
|
|
|
|
|
"inline-grid" gesetzt ist.
|
|
|
|
|
Alle untergeordneten Elemente des Containers, werden automatisch "grid items".
|
|
|
|
|
</p>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
<code>
|
|
|
|
|
.grid-container { <br>   display: grid; <br> }
|
|
|
|
|
</code>
|
|
|
|
|
</div>
|
|
|
|
|
<br>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
<code>
|
|
|
|
|
.grid-container { <br>   display: inline-grid; <br> }
|
|
|
|
|
</code>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<h3>Grid Reihen und Spalten</h3>
|
|
|
|
|
<p>
|
|
|
|
|
Die Vertikalen Linien eines grid items nennt man Spalten und die horizontalen Linien nennt man
|
|
|
|
|
Reihen.
|
|
|
|
|
</p>
|
|
|
|
|
<div class="visual-example" id="example1">
|
|
|
|
|
<p>p1</p>
|
|
|
|
|
<p>p2</p>
|
|
|
|
|
<p>p3</p>
|
|
|
|
|
<p>p4</p>
|
|
|
|
|
<p>p5</p>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="explanation">
|
|
|
|
|
Eine optisch angeordnete Reihe von P-Elementen.
|
|
|
|
|
</p>
|
|
|
|
|
<br>
|
|
|
|
|
<div class="visual-example" id="example2">
|
|
|
|
|
<p>p1</p>
|
|
|
|
|
<p>p2</p>
|
|
|
|
|
<p>p3</p>
|
|
|
|
|
<p>p4</p>
|
|
|
|
|
<p>p5</p>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="explanation">
|
|
|
|
|
Eine optisch angeordnete Spalte von P-Elementen.
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<h3>Grid Linien</h3>
|
|
|
|
|
<p>
|
|
|
|
|
Die sogenannten "grid lines" sind die Linien zwischen den grid items im grid container.
|
|
|
|
|
Die Linien zwischen Reihen nennt man "row lines" und die Linien zwischen Spalten nennt man "column
|
|
|
|
|
lines".
|
|
|
|
|
Man kann die Linien ansprechen um items im Grid-Container gezielt zu platzieren.
|
|
|
|
|
</p>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
<code>
|
|
|
|
|
.p1 { <br>   grid-column-start: 1; <br>   grid-column-end: 3; <br>}
|
|
|
|
|
</code>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="visual-example" id="example3">
|
|
|
|
|
<p id="item1">p1</p>
|
|
|
|
|
<p>p2</p>
|
|
|
|
|
<p>p3</p>
|
|
|
|
|
<p>p4</p>
|
|
|
|
|
<p>p5</p>
|
|
|
|
|
<p>p6</p>
|
|
|
|
|
<p>p7</p>
|
|
|
|
|
<p>p8</p>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="explanation">
|
|
|
|
|
Der p1 Container fängt hier bei der "column line" 1 ganz links an und hört bei der "column line" 3
|
|
|
|
|
auf.
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
</article>
|
|
|
|
|
</main>
|
|
|
|
|
<footer>
|
|
|
|
|
<p>Erstellt von: Lukas Pfau</p>
|
|
|
|
|
</footer>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
