From 3d21c92def37bc1ce24694126fa35701bf1f5955 Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Di, 24 Okt 2023 17:42:00 +0200
Subject: [PATCH] Merge branch 'draft'

---
 index.html |  164 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 162 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 4b8f512..1d92027 100644
--- a/index.html
+++ b/index.html
@@ -2903,8 +2903,8 @@
 						</ul>
 					</section>
 					<section>
-						<p>hidden</p>
-						<img data-src="/assets/images/css-display-hidden.svg">
+						<p>none</p>
+						<img data-src="/assets/images/css-display-none.svg">
 						<ul>
 							<li>unsichtbar</li>
 							<li>Platz wird nicht länger beansprucht, so als wenn das Element nicht im DOM wäre</li>
@@ -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