From 4ced53fb3c3186b163d1e43117dca935013ec6c9 Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Di, 24 Okt 2023 16:15:14 +0200
Subject: [PATCH] add css grid

---
 index.html |  160 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 160 insertions(+), 0 deletions(-)

diff --git a/index.html b/index.html
index 98cd018..1d92027 100644
--- a/index.html
+++ b/index.html
@@ -3064,6 +3064,166 @@
 						<h3>Aufgabe</h3>
 						<p>Mit CSS Flexbox rumspielen</p>
 					</section>
+					<section>
+						<h3>CSS Grid</h3>
+					</section>
+					<section>
+						<h3>Terminologie</h3>
+						<img data-src="/assets/images/css-grid-terminology.drawio.svg">
+					</section>
+					<section>
+						<pre>
+							<code class="css" data-trim data-line-numbers="">
+								.grid {
+									display: grid; /* inline-grid; */
+					
+									grid-template-columns: 1fr 1fr 1fr;
+									grid-template-rows: 1fr 1fr;
+									
+									gap: 5px 10px;
+								}
+							</code>
+						</pre>
+					</section>
+					<section>
+						<pre>
+							<code class="html" data-trim data-line-numbers="">
+								&lt;div class="grid"&gt;
+									&lt;span&gt;A&lt;/span&gt;
+									&lt;span&gt;B&lt;/span&gt;
+									&lt;span&gt;C&lt;/span&gt;
+									&lt;span&gt;D&lt;/span&gt;
+									&lt;span&gt;E&lt;/span&gt;
+									&lt;span&gt;F&lt;/span&gt;
+								&lt;/div&gt;
+							</code>
+						</pre>
+					</section>
+					<section>
+						<iframe data-src="/assets/html/css-grid-example-1.html"></iframe>
+					</section>
+					<section>
+						<pre>
+							<code class="css" data-trim data-line-numbers="">
+								.grid {
+									grid-template-columns: [left] 1fr [column1] 1fr [column2] 1fr [right];
+									grid-template-rows: [top] 1fr [row1] 1fr [bottom];
+								}
+								
+								.a {
+									grid-column: 2 / span 2;
+									grid-row: 1;
+								}
+								
+								.b {
+									grid-column: left / column2;
+									grid-row: 2;
+								}
+							</code>
+						</pre>
+					</section>
+					<section>
+						<pre>
+							<code class="html" data-trim data-line-numbers="">
+								&lt;div class="grid"&gt;
+									&lt;span class="a"&gt;A&lt;/span&gt;
+									&lt;span class="b"&gt;B&lt;/span&gt;
+								&lt;/div&gt;
+							</code>
+						</pre>
+					</section>
+					<section>
+						<iframe data-src="/assets/html/css-grid-example-2.html"></iframe>
+					</section>
+					<section>
+						<pre>
+							<code class="css" data-trim data-line-numbers="">
+								.grid {
+									grid-template-areas:
+										"header header header"
+										"content content content";
+								}
+					
+								.a {
+									grid-area: header;
+								}
+					
+								.b {
+									grid-area: 2 / 1 / 2 / 3; /* start-row / start-column / end-row / end-column */
+										/* alternativ auch Namen der Lines möglich */
+								}
+							</code>
+						</pre>
+					</section>
+					<section>
+						<iframe data-src="/assets/html/css-grid-example-3.html"></iframe>
+					</section>
+					<section>
+						<h3>Aufgabe</h3>
+						<p>Implementiere folgendes Design:</p>
+						<iframe data-src="/assets/html/css-grid-excercise.html"></iframe>
+					</section>
+					<section>
+						<h3>Lösung</h3>
+						<pre>
+							<code class="css" data-trim data-line-numbers="">
+								.grid {
+									display: grid;
+									
+									grid-template-rows: 1fr 5fr 1fr;
+									
+									gap: 2px;
+					
+									grid-template-areas:
+										"navigation header header header"
+										"navigation content content content"
+										"footer footer footer footer"
+								}
+					
+								.navigation {
+									grid-area: navigation;
+								}
+					
+								.header {
+									grid-area: header;
+								}
+					
+								.content {
+									grid-area: content;
+								}
+					
+								.footer {
+									grid-area: footer;
+								}
+							</code>
+						</pre>
+					</section>
+					<section>
+						<pre>
+							<code class="html" data-trim data-line-numbers="">
+								&lt;div class="grid"&gt;
+									&lt;div class="area navigation"&gt;Navigation&lt;/div&gt;
+									&lt;div class="area header"&gt;Header&lt;/div&gt;
+									&lt;div class="area content"&gt;Content&lt;/div&gt;
+									&lt;div class="area footer"&gt;Footer&lt;/div&gt;
+								&lt;/div&gt;
+							</code>
+						</pre>
+					</section>
+					<section>
+						<h4>Platzierug des Inhalts</h4>
+						<pre>
+							<code class="css" data-trim data-line-numbers="">
+								.grid {
+									align-items: center;
+									justify-items: center;
+								}
+							</code>
+						</pre>
+					</section>
+					<section>
+						<iframe data-src="/assets/html/css-grid-example-4.html"></iframe>
+					</section>
 				</section>
 			</div>
 		</div>

--
Gitblit v1.9.3