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
---
assets/html/css-grid-example-4.html | 52 +++++++
assets/html/css-grid-excercise.html | 49 +++++++
assets/drawio/css-grid-terminology.drawio | 1
assets/html/css-grid-example-3.html | 34 ++++
index.html | 160 ++++++++++++++++++++++
assets/html/css-grid-example-2.html | 35 +++++
assets/images/css-grid-terminology.drawio.svg | 4
assets/html/css-grid-example-1.html | 31 ++++
8 files changed, 366 insertions(+), 0 deletions(-)
diff --git a/assets/drawio/css-grid-terminology.drawio b/assets/drawio/css-grid-terminology.drawio
new file mode 100644
index 0000000..1f69480
--- /dev/null
+++ b/assets/drawio/css-grid-terminology.drawio
@@ -0,0 +1 @@
+<mxfile host="Electron" modified="2023-10-24T12:09:19.799Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="mUKfkLqiDt0e9qkWBIUN" version="16.1.2" type="device"><diagram id="qX8B151_wiXKYsOxSvGI" name="Page-1">5ZnLcpswFIafhmVmkLgvGydxO9NMF15k2VFBBsay5ciixn36ykaEmzKTjlGkJt5Y/EfX7widAzjeYlsvGdoXjzTDxIFuVjvenQMhCGMg/s7KqVHCOG6EnJWZrNQJq/IPlqIr1arM8GFQkVNKeLkfiind7XDKBxpijB6H1daUDEfdoxxPhFWKyFR9KjNeNGoMo07/isu8aEcGYdJYtqitLFdyKFBGjz3Ju3e8BaOUN6VtvcDkDK/l0rR7eMX6MjGGd/wtDZarE65K/C2LqsdlEPlLXK9uZC+/EankguVk+aklwGi1y/C5E9fxbo9FyfFqj9Kz9Sh8LrSCb4m4AqI4nVQ7AmYc1z1JTnKJ6RZzdhJVjh3fwJPQih5bL5Qikj7NX9p2yxYFufJ/oAAVFEIihr1dU7GOPo7wuaKt4eZw2a5fRIVkX3c2UcrP/+ll6KYjMa+mr8Z0HeV1SciCEsoubQUXlIBITqqnry8/oR84oxvcs8C7KHTdK/3VWqVXTsPLnjcBVHhTmzM9i7Z0a/UtY+TbxwhGljECsX2QRvdabJxRYiEj3zJI7WA2QRrfbe8J6Ufw6zl3OYie4PonODxsvO+BpkRkAkSB7c2BLTDNSJWmmGY0jmzGIekJ/1dBmoQ245AiBaQZEl5S7vB/kfDOeS6ozs4AKLwJdHlTT6JyFSPfNZfNKRnpSVRmZWQ+ButJVObdSMbPTqBKVWY4PDlD6ebjn55w6M9k6k4/UbjT1+ZOG7OqUYSBxve8hVnVOPW0gJKe1yqz5p4WUArsozSOMhZQCvVEGYEEfbogA8KpO6HqEwPQlqMD1SOX6RN0tOkVsfidN72FTzKTMGOekoXPMpMwY5ySpreu84YZjZTEZfdt+WLrfaH37v8C</diagram></mxfile>
\ No newline at end of file
diff --git a/assets/html/css-grid-example-1.html b/assets/html/css-grid-example-1.html
new file mode 100644
index 0000000..82c83f8
--- /dev/null
+++ b/assets/html/css-grid-example-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>Title</title>
+ <style>
+ span {
+ background-color: yellow;
+ }
+
+ .grid {
+ display: grid; /* inline-flex; */
+
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-template-rows: 1fr 1fr;
+
+ gap: 10px 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="grid">
+ <span>A</span>
+ <span>B</span>
+ <span>C</span>
+ <span>D</span>
+ <span>E</span>
+ <span>F</span>
+ </div>
+ </body>
+</html>
diff --git a/assets/html/css-grid-example-2.html b/assets/html/css-grid-example-2.html
new file mode 100644
index 0000000..d1f21e6
--- /dev/null
+++ b/assets/html/css-grid-example-2.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>Title</title>
+ <style>
+ span {
+ background-color: yellow;
+ }
+
+ .grid {
+ display: 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;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="grid">
+ <span class="a">A</span>
+ <span class="b">B</span>
+ </div>
+ </body>
+</html>
diff --git a/assets/html/css-grid-example-3.html b/assets/html/css-grid-example-3.html
new file mode 100644
index 0000000..fd3394a
--- /dev/null
+++ b/assets/html/css-grid-example-3.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>Title</title>
+ <style>
+ span {
+ background-color: yellow;
+ }
+
+ .grid {
+ display: grid;
+
+ grid-template-areas:
+ "header header header"
+ "content content content";
+ }
+
+ .a {
+ grid-area: header;
+ }
+
+ .b {
+ grid-area: 2 / 1 / 2 / 3;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="grid">
+ <span class="a">A</span>
+ <span class="b">B</span>
+ </div>
+ </body>
+</html>
diff --git a/assets/html/css-grid-example-4.html b/assets/html/css-grid-example-4.html
new file mode 100644
index 0000000..3c561fe
--- /dev/null
+++ b/assets/html/css-grid-example-4.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>Title</title>
+ <style>
+ .area {
+ background-color: yellow;
+ }
+
+ .grid {
+ display: grid;
+
+ grid-template-rows: 1fr 5fr 1fr;
+
+ gap: 5px;
+
+ grid-template-areas:
+ "navigation header header header"
+ "navigation content content content"
+ "footer footer footer footer";
+
+ align-items: center;
+ justify-items: center;
+ }
+
+ .navigation {
+ grid-area: navigation;
+ }
+
+ .header {
+ grid-area: header;
+ }
+
+ .content {
+ grid-area: content;
+ }
+
+ .footer {
+ grid-area: footer;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="grid">
+ <div class="area navigation">Navigation</div>
+ <div class="area header">Header</div>
+ <div class="area content">Content</div>
+ <div class="area footer">Footer</div>
+ </div>
+ </body>
+</html>
diff --git a/assets/html/css-grid-excercise.html b/assets/html/css-grid-excercise.html
new file mode 100644
index 0000000..06aae63
--- /dev/null
+++ b/assets/html/css-grid-excercise.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>Title</title>
+ <style>
+ .area {
+ background-color: yellow;
+ }
+
+ .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;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="grid">
+ <div class="area navigation">Navigation</div>
+ <div class="area header">Header</div>
+ <div class="area content">Content</div>
+ <div class="area footer">Footer</div>
+ </div>
+ </body>
+</html>
diff --git a/assets/images/css-grid-terminology.drawio.svg b/assets/images/css-grid-terminology.drawio.svg
new file mode 100644
index 0000000..424d6b7
--- /dev/null
+++ b/assets/images/css-grid-terminology.drawio.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Do not edit this file with editors other than diagrams.net -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="571px" height="401px" viewBox="-0.5 -0.5 571 401" content="<mxfile host="Electron" modified="2023-10-24T12:09:40.301Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="4wk68zop8bXdEyjJgEHZ" version="16.1.2" type="device"><diagram id="qX8B151_wiXKYsOxSvGI" name="Page-1">5ZnLcpswFIafhmVmkLgvGydxO9NMF15k2VFBBsay5ciixn36ykaEmzKTjlGkJt5Y/EfX7widAzjeYlsvGdoXjzTDxIFuVjvenQMhCGMg/s7KqVHCOG6EnJWZrNQJq/IPlqIr1arM8GFQkVNKeLkfiind7XDKBxpijB6H1daUDEfdoxxPhFWKyFR9KjNeNGoMo07/isu8aEcGYdJYtqitLFdyKFBGjz3Ju3e8BaOUN6VtvcDkDK/l0rR7eMX6MjGGd/wtDZarE65K/C2LqsdlEPlLXK9uZC+/EankguVk+aklwGi1y/C5E9fxbo9FyfFqj9Kz9Sh8LrSCb4m4AqI4nVQ7AmYc1z1JTnKJ6RZzdhJVjh3fwJPQih5bL5Qikj7NX9p2yxYFufJ/oAAVFEIihr1dU7GOPo7wuaKt4eZw2a5fRIVkX3c2UcrP/+ll6KYjMa+mr8Z0HeV1SciCEsoubQUXlIBITqqnry8/oR84oxvcs8C7KHTdK/3VWqVXTsPLnjcBVHhTmzM9i7Z0a/UtY+TbxwhGljECsX2QRvdabJxRYiEj3zJI7WA2QRrfbe8J6Ufw6zl3OYie4PonODxsvO+BpkRkAkSB7c2BLTDNSJWmmGY0jmzGIekJ/1dBmoQ245AiBaQZEl5S7vB/kfDOeS6ozs4AKLwJdHlTT6JyFSPfNZfNKRnpSVRmZWQ+ButJVObdSMbPTqBKVWY4PDlD6ebjn55w6M9k6k4/UbjT1+ZOG7OqUYSBxve8hVnVOPW0gJKe1yqz5p4WUArsozSOMhZQCvVEGYEEfbogA8KpO6HqEwPQlqMD1SOX6RN0tOkVsfidN72FTzKTMGOekoXPMpMwY5ySpreu84YZjZTEZfdt+WLrfaH37v8C</diagram></mxfile>" style="background-color: rgb(42, 42, 42);"><defs/><g><rect x="20" y="20" width="530" height="360" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="30" y="30" width="120" height="60" fill="#60a917" stroke="#2d7600" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 60px; margin-left: 31px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 9px">cell</font></div></div></div></foreignObject><text x="90" y="64" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">cell</text></switch></g><rect x="160" y="30" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="290" y="30" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="30" y="100" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="160" y="100" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="290" y="100" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="30" y="170" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="160" y="170" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="290" y="170" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="30" y="300" width="510" height="10" fill="#60a917" stroke="#2d7600" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 508px; height: 1px; padding-top: 305px; margin-left: 31px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 9px">line</font></div></div></div></foreignObject><text x="285" y="309" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">line</text></switch></g><rect x="420" y="30" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="420" y="100" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="420" y="170" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="40" y="110" width="490" height="40" fill="#60a917" stroke="#2d7600" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 488px; height: 1px; padding-top: 130px; margin-left: 41px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 9px">track</font></div></div></div></foreignObject><text x="285" y="134" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">track</text></switch></g><rect x="30" y="240" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="160" y="240" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="290" y="240" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="420" y="240" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="40" y="180" width="230" height="110" fill="#60a917" stroke="#2d7600" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 228px; height: 1px; padding-top: 235px; margin-left: 41px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 9px">area</font></div></div></div></foreignObject><text x="155" y="239" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">area</text></switch></g><rect x="30" y="310" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="160" y="310" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="290" y="310" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="420" y="310" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>
\ No newline at end of file
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="">
+ <div class="grid">
+ <span>A</span>
+ <span>B</span>
+ <span>C</span>
+ <span>D</span>
+ <span>E</span>
+ <span>F</span>
+ </div>
+ </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="">
+ <div class="grid">
+ <span class="a">A</span>
+ <span class="b">B</span>
+ </div>
+ </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="">
+ <div class="grid">
+ <div class="area navigation">Navigation</div>
+ <div class="area header">Header</div>
+ <div class="area content">Content</div>
+ <div class="area footer">Footer</div>
+ </div>
+ </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